CODEWITHSUNDEEP
vue.jsvuejs2vue-router
chalo
chalo

Reputation: 1059

How to Generate Routes for Subcomponents Based on a Base Path

How to get the next route in vue-router

I have the following route: /principal

{path: '/principal', component: Principal}

Now, I need to drive other components that have the same url base, the new url would be as follows:

/principal/compa

Is it possible to have a single base route be able to display the other components?

Something like this (I know that vue-router does not work like this), but how do you get this behavior?

{ path: '/principal', component: Principal, subpath: { path: 'compa', component: 'CompA' } }

Thanks

Upvotes: 1

Views: 602

Answers (1)

Hashem Qolami
Hashem Qolami

Reputation: 99564

There is a children option in VueRouter constructor config to render Vue components with nested routes.

In that particular case, it would be:

{
   path: '/principal', 
   component: Principal,
   children: [{
    path: 'compa',  // it would match /principal/compa
    component: CompA
   }]
}

From the vue-router doc:

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      children: [ // <-- notice the children property
        {
          // 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
        }
      ]
    }
  ]
});

Have a look at nested routes for more details.

Upvotes: 1

Related Questions