Geek Answers Handbook

Activate a link router that has multi-level nested routes with CRUD settings

I am trying to configure deep nesting as shown below, and I am sure that we cannot use exact in the router-link for nested routes.

 <div id="app"> <nav class="nav nav-main"> <router-link exact to="/" class="nav-link" activeClass="active">Dashboard</router-link> <router-link to="/projects" class="nav-link" activeClass="active">Projects</router-link> </nav> <div class="parent-content"> <h4>Content for Parent goes here</h4> </div> <router-view> <nav class="nav nav-main"> <router-link :to="'/projects/' + $route.params.projectId" class="nav-link" activeClass="active">Deals</router-link> <router-link :to="'/projects/' + $route.params.projectId + '/commitments/'" class="nav-link" activeClass="active">Commitments</router-link> </nav> <router-view> <div class="child-content"> <h4>Content for Child goes here</h4> </div> </router-view> </router-view> </div>

My route:

 routes: [ { path: '/', component: Dashboard }, { path: '/projects', component: Projects }, { path: '/projects/:id', name: 'projects-detail', component: ProjectDetails, children: [ // DEALS { path: '/projects/:projectId/deals', component: Deals }, { path: '/projects/:projectId/deals/:dealId/details', component: DealDetails }, // COMMITMENTS { path: '/projects/:projectId/deals/:dealId/commitments/:commitmentId/edit', component: CommitmentEdit } ] } ]

With the setting above, I need to activate the router-links when the route:
/projects/:projectId/deals/:dealId/details then activate Deals
/projects/:projectId/deals/:dealId/commitments/:commitmentId/edit , then activate Commitments

+7
javascript vue-router
source share
1 answer

I think you don’t have another <router-view></router-view> ProjectDetails inside ProjectDetails , add this and try.

Also remove /projects/:projectId from the entire child path, as you are already in the parent path path: '/projects/:id',

So the final route will be

 routes: [ { path: '/', component: Dashboard }, { path: '/projects', component: Projects }, { path: '/projects/:id', component: ProjectDetails, children : [ // DEALS { path: 'deals/:dealId/details',//path will be /projects/:projectId/deals/:dealId/details component: DealDetails }, { path: 'deals',.// path will be /projects/:projectId/deals component: Deals }, // COMMITMENTS { path: '/deals/:dealId/commitments/:commitmentId/edit/', component: CommitmentEdit } ] } ]

The fiddle works here: https://jsfiddle.net/chyLjpv0/16/

Read more about child path .

If you don’t need it, and the component depends on the parent, do not do it like using children directly as the root path, for example

 routes: [ { path: '/', component: Dashboard }, { path: '/projects', component: Projects }, { path: '/projects/:id', component: ProjectDetails, }, // DEALS { path: '/projects/:projectId/deals/:dealId/details', component: DealDetails }, { path: '/projects/:projectId/deals', component: Deals }, // COMMITMENTS { path: '/projects/:projectId/deals/:dealId/commitments/:commitmentId/edit/', component: CommitmentEdit } ]

Working fiddle for this: https://jsfiddle.net/chyLjpv0/17/

The router-link-exact-active class already works in this example: https://jsfiddle.net/chyLjpv0/18/ to display the link as active

In your edit

Why do you put <router-view> inside <router-view> . Outer only works on replacement, and the internal <router-view> useless. Use <router-view> in the parent component for the child component.

Also your internal <router-view> not properly closed as </router-view>

+4
source share

More articles:


All Articles