vue.js - Get route by name and params for vue-router

Question

I am using Vue with vue-router. For product items in a list view I would like to generate JSON-LN annotations with the url attribute set to the path of the product detail view.

I know I can get the current route's path by using this.$route.path but is there a way to get a distinct route path as it would be rendered with

<router-link :to={name: 'ProductDetail', params: {id: some_id, slug: some_slug}}></router-link>

to inject the route's path somewhere else?

Answer 1

You are looking for the Router instance's resolve method:

Given location in form same as used in <router-link/>, returns object with the following resolved properties:

{
  location: Location;
  route: Route;
  href: string;
}

In your case you could do something like this to get the url:

let props = this.$router.resolve({ 
  name: 'ProductDetail',
  params: { id: some_id, slug: some_slug },
});

return props.href;