How to do multiple nested route with Vue.js?

Question

is that posible to create Nested Routes more then 2?

i want to create something like this:

+--------------------+
| User               |
| +----------------+ |
| | Profile        | |
| | +------------+ | |
| | | About      | | |
| | | +--------+ | | |
| | | | Detail | | | |
| | | +--------+ | | |
| | +------------+ | |
| +----------------+ |
+--------------------+

so in the web will be like this

link: /localhost/user

web display:

USER

link: localhost/user/profile

web display:

USER
  PROFILE

link: localhost/user/profile/about

web display:

USER
  PROFILE
    ABOUT

link: localhost/user/profile/about/detail

web display:

USER
  PROFILE
    ABOUT
      DETAIL

any example code with jsfiddle will be very appreciated, thanks.

Billal BEGUERADJ · Accepted Answer · 2019-01-01 05:18:16Z

9

You just have to nest the corresponding routes (obviously you would also need the user's id parameter):

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          path: 'profile', component: Profile,
            children: [
              {
                path: 'about', component: About,
                  children: [
                    {
                      path: 'details', component: Details,
                    }
                  ]
              }
           ]
        }
      ]
    }
  ]
})

Same code, but just condensed (maybe it helps to read better):

const router = new VueRouter({
  routes: [{
    path: '/user/:id', component: User,
      children: [{
        path: 'profile', component: Profile,
          children: [{
            path: 'about', component: About,
              children: [{
                path: 'details', component: Details,
              }]
          }]
      }]
   }]
})

edited Jan 1, 2019 at 5:18

answered Jan 1, 2019 at 5:11

Billal BEGUERADJ

23k45 gold badges125 silver badges142 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Himavan Over a year ago

Hi @billal-begueradj ! could you also explain how to switch routes in child pages with multiple pages in template using router-view

realnot Over a year ago

Could you improve the answer adding also the case where root paths or intermediate paths are not accessible because don't make sense? In this case a "fuzzy" component is mandatory? why a redirect is not enough?

Collectives™ on Stack Overflow

How to do multiple nested route with Vue.js?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related