[Vuejs]-Vue router-link params on page load or programmatic navigation

by

-2👍

✅

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.

Leave a comment