Vue router-link params on page load or programmatic navigation

Question

I create router-links with a v-for where I pass params props so I can access them in my router-view. Now I need to have my route props available when a route is accessed other ways than clicking the link, like navigating with $router.go or external URL. How can I pull/sync this data from the existing router-links?

<router-link
  v-for="item in items"
  :to="{
    name: 'Item',
    params: {
      url: `${item.no}-${item.title.replace(/\s+/g, '-')}`,
      no: item.no,
      title: item.title
    }
  }">
  {{item.no}}
  {{item.title}}
</router-link>

Inside the Item component:

<article :key="no">
  <h1> {{ no }} {{ title }} </h1>
</article>

The route:

export default new Router({
  routes: [
    {
      path: '/:url',
      name: 'Item',
      component: Item,
      props: true
    }
  ]
})

Please show what you have already done - your code snippets. — Egor Stambakio

Daniel Pintilei Daniel Pintilei · Accepted Answer · 2017-04-04T17:29:25

I guess the simplest solution is to include the props I need to render in the URL.

<router-link
  v-for="item in items"
  :to="{
    name: 'Item',
    params: {
      no: item.no,
      title: item.title.replace(/\s+/g, '-')
    }
  }">
  {{item.no}}
  {{item.title}}
</router-link>

Breaking down the URL like this:

export default new Router({
      routes: [
        {
          path: '/:no/:title',
          name: 'Item',
          component: Item,
          props: true
        }
      ]
    })

This way these props

<article :key="no">
  <h1> {{ no }} {{ title }} </h1>
</article>

will be available without accessing the route through the link directly.

Vue router-link params on page load or programmatic navigation

1 Answers