I was looking a way to make my static blog development more faster using vue-router, but I found a problem linking the children pages with the parent route.
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about', name: 'About', component: About,
children: [
{
path: '/test', name: 'How test children link', component: prova }
]
}
]
If I try to go on localhost/about/test address Vue can't find the page, but I can reach it if I go directly to localhost/test.
If I change the children path to
path: '/about/test', name: 'How test children link', component: prova }
It works, but, I don't understand the utility of the child route.
What I don't understand about children route?
You are on the right track. But you have to keep in mind that / means, and does, something.
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about', name: 'About', component: About,
children: [
{
path: 'test', name: 'AboutChild', component: TestComponent
}
]
}
]
So basically do NOT include a / when adding a path for children. And if you do, add the whole path so in this case: path: '/about/test'
And equally as important, you won't see the contents of AboutChild until you had a html tag called <router-view /> in the About component.