[Vuejs]-What Typescript definition should I use for a route link using Vue Router?

by

1👍

✅

When you want to navigate to a route using a name and possibly pass query parameters, you should indeed use the RouteLocationRaw interface as mentioned in the comment. However, it seems like you’re using Vue Router in conjunction with TypeScript, and sometimes the type inference can be a bit tricky.

update your Toast interface to correctly define the internal_url property:

export interface Toast {
  message: string;
  call_to_action: string;
  external_url?: string;
  internal_url?: RouteLocationRaw;
}

Now you can use the internal_url property with the RouteLocationRaw type in your code:

import { RouteLocationRaw } from 'vue-router';

// Define your route names
const routeNames = {
  profile: 'profile', // replace this with your actual route name
};

// Example usage
addToast({
  message: 'Someone viewed your profile',
  call_to_action: 'Review',
  internal_url: { name: routeNames.profile, query: { id: current_user.id }} 
});
👤nebil

Leave a comment