Vue router-link params on page load or programmatic navigation - vue.js

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
}
]
})

Answer 1

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.