Scenario
In my app, I am using vue.js 2.6 and vue-router 3.0.
Within the app, there are links to detail pages set up like this:
<div v-for="item in items">
<router-link :to="{name: 'details', params: {key: item.shortKey}}">
</div>
Issue at Hand
When navigating to different items, the URL in the browser does not update properly. The correct value is seen within the code itself and in the view tools.
Possible Solutions Tried
Even using router.push or changing from history to hash mode did not alter this behavior.
Router Configuration Overview
const routes = new Router({
mode: 'history',
routes: [{
component: layout,
path: '/',
children: [
{
path: '/',
name: 'home',
component: Home,
meta:{display:"home"}
},
{
path:'list',
name:'list',
component: listItemsComponent,
},
{
path: 'details/:key',
name: 'details',
component: detailComponent
},
]
}]
});