32

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?

Soviut
  • 88,194
  • 49
  • 192
  • 260
Till Kolter
  • 602
  • 1
  • 9
  • 13
  • Hey Till, is there anyway you can put any detail about how structured your Vuejs to get product urls? – M dunbavan May 08 '17 at 14:07
  • @Mdunbavan Can you specify the problem your are facing? The router-specific answer is posted below. But another problem was, that for JSON-LD you need to specify the full url which is not part of the route. For that, I used this solution: http://developmentnow.com/2016/07/13/webpack-injecting-server-urls/ – Till Kolter May 09 '17 at 15:05

1 Answers1

83

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;
Community
  • 1
  • 1
thanksd
  • 54,176
  • 22
  • 157
  • 150
  • Hi thanksd this looks promising. With the props above how could I inject that into the component for the product detail when you click on the route? Would it go inside the component itself? – M dunbavan May 10 '17 at 08:57
  • 2
    @Mdunbavan why do you need to inject it? You can access the current route's name and parameters via `this.$route.name` and `this.$route.params`. – thanksd May 10 '17 at 11:59
  • 2
    @thanksd because that would indeed return this route's info, but not info for other routes, which is what OP (and myself) want. Your answer looks like it'll work though. I'm trying to get meta data from different routes based on name, and I think this will work. It'd be cool if you could do something like `this.$router.ProductDetail...` but I guess it's obvious why that wouldn't work. – Chase Oct 12 '17 at 17:43