使用 CRUD 设置激活具有多级嵌套路由的路由器链接

本文介绍了使用 CRUD 设置激活具有多级嵌套路由的路由器链接的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我尝试像下面那样设置深度嵌套，我有点确定我们不能在 router-link 中使用 exact 来进行嵌套路由.

<nav class="nav nav-main"><router-link 精确到="/" class="nav-link" activeClass="active">仪表板</router-link><router-link to="/projects" class="nav-link" activeClass="active">项目</router-link></nav><div class="parent-content"><h4>家长的内容在这里</h4>

<路由器视图><nav class="nav nav-main"><router-link :to="'/projects/' + $route.params.projectId" class="nav-link" activeClass="active">交易</router-link><router-link :to="'/projects/' + $route.params.projectId + '/commitments/'" class="nav-link" activeClass="active">Commitments</router-link></nav><路由器视图><div class="child-content"><h4>儿童内容在此处</h4>

</路由器视图></路由器视图>

我的路线:

路线:[{小路: '/'，组件:仪表板},{路径:'/项目'，组成部分:项目},{路径:'/projects/:id',name: '项目细节',组件:项目详细信息，孩子们: [//交易{路径:'/projects/:projectId/deals',组成部分:优惠},{路径:'/projects/:projectId/deals/:dealId/details',组件:DealDetails},//承诺{路径:'/projects/:projectId/deals/:dealId/commitments/:commitmentId/edit',组件:承诺编辑}]}]

通过上面的设置，我需要激活router-links，当路由是:/projects/:projectId/deals/:dealId/details 然后激活 Deals/projects/:projectId/deals/:dealId/commitments/:commitmentId/edit 然后激活 Commitments

解决方案

我想你在 ProjectDetails 里面没有另一个 </router-view>代码> 组件添加此并尝试.

同时从所有子路径中删除 /projects/:projectId，因为您已经在父路径 path: '/projects/:id',

所以最后你的路线是

路线:[{小路: '/'，组件:仪表板},{路径:'/项目'，组成部分:项目},{路径:'/projects/:id',组件:项目详细信息，孩子们 : [//交易{path: 'deals/:dealId/details',//路径为/projects/:projectId/deals/:dealId/details组件:DealDetails},{path: 'deals',.//路径将是/projects/:projectId/deals组成部分:优惠},//承诺{路径:'/deals/:dealId/commitments/:commitmentId/edit/',组件:承诺编辑}]}]

这是工作小提琴:jsfiddle/chyLjpv0/16/

阅读有关子路径的更多信息.

如果您不需要并且组件依赖于父级，请不要将其作为子级直接用作根路径，如

路线:[{小路: '/'，组件:仪表板},{路径:'/项目'，组成部分:项目},{路径:'/projects/:id',组件:项目详细信息，},//交易{路径:'/projects/:projectId/deals/:dealId/details',组件:DealDetails},{路径:'/projects/:projectId/deals',组成部分:优惠},//承诺{路径:'/projects/:projectId/deals/:dealId/commitments/:commitmentId/edit/',组件:承诺编辑}]

为此工作:jsfiddle/chyLjpv0/17/

Class router-link-exact-active 已经在这个例子中工作了:jsfiddle/chyLjpv0/18/ 显示链接处于活动状态

在您的编辑中

为什么将 放在 中.外部仅在被替换时才起作用，而内部 毫无价值.在子组件的父组件中使用 .

此外，您的内部 没有像 </router-view>

那样正确关闭

I trying to setup deep nesting like below, and I am kinda sure about we cannot use exact in 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 above setup, I need to activate router-links, when the route is: /projects/:projectId/deals/:dealId/details then activate Deals /projects/:projectId/deals/:dealId/commitments/:commitmentId/edit then activate Commitments

解决方案

I think you have not another <router-view></router-view> inside ProjectDetails component add this and try.

Also remove /projects/:projectId from all child path as you have already in parent path path: '/projects/:id',

So final you route would 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 } ] } ]

Here is working fiddle : jsfiddle/chyLjpv0/16/

Read more about child path.

If you need not and component depended on parent dont make it as child use directly as root path like

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 : jsfiddle/chyLjpv0/17/

Class router-link-exact-active is already working in this example : jsfiddle/chyLjpv0/18/ to display link as active

In your edit

Why you put <router-view> inside <router-view>. Outer is only working as it is being replaced and inner <router-view> is worthless. Use <router-view> in parent component for child component.

Also your inner <router-view> is not closed properly like </router-view>