CODEWITHSUNDEEP
javascriptvue.jsvue-router
Stefano Martini
Stefano Martini

Reputation: 455

Vue children route

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?

Upvotes: 3

Views: 1264

Answers (1)

Riza Khan
Riza Khan

Reputation: 3158

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.

Upvotes: 4

Related Questions