0👍
The problem with your code is you write a slash before each child route (‘/products’) remove it
0👍
In your codes, you still have a component
on the route with the children
:
{
path: '/store',
component: Dashboard,
children: [
{
path: '/products',
component: ProductsView,
},
]
},
However, the Vuejs documentation shows that there shouldn’t be a component in the parent route, like this:
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User,
children: [
{
// UserProfile will be rendered inside User's <router-view>
// when /user/:id/profile is matched
path: 'profile',
component: UserProfile
},
{
// UserPosts will be rendered inside User's <router-view>
// when /user/:id/posts is matched
path: 'posts',
component: UserPosts
}
]
}
]
})
So, instead, you should have:
const routes = [
{
path: '/',
component: LogInView
},
{
path: '/store',
// component: Dashboard, // <-- should be removed
children: [
{
path: 'products',
component: ProductsView,
},
]
},
{
path: '/platform',
children: [
{
path: 'products',
component: ProductsView,
},
]
},
{
path: '/platform',
component: Dashboard
} ]
@TEFO was right to point out that the child route should NOT contain a slash
Source:stackexchange.com