我尝试设置如下所示的深度嵌套,我确信我们无法在 router-link $ c $中使用完全 c>用于嵌套路线。
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>我的路线:
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 } ] } ]通过上面的设置,我需要激活路由器链接,路线是: / projects /:projectId / deals /:de alId / details 然后激活交易 / projects /:projectId / deals /:dealId /承诺/:commitmentId / edit 然后激活承诺
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
推荐答案我认为你在 ProjectDetails 组件添加此项并尝试。
I think you have not another <router-view></router-view> inside ProjectDetails component add this and try.
同样从所有子路径中删除 / projects /:projectId 在父路径路径:'/ projects /:id',
Also remove /projects/:projectId from all child path as you have already in parent path path: '/projects/:id',
所以最终你的路线是
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 } ] } ]这是工作小提琴: 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 } ]为此工作小提琴: jsfiddle/chyLjpv0/17/
类 router-link-exact-active 已在此示例中使用: jsfiddle/chyLjpv0/18/ 将链接显示为活动
Class router-link-exact-active is already working in this example : jsfiddle/chyLjpv0/18/ to display link as active
在您的修改中
为什么要输入< rou ter-view> 在< router-view> 内。外部仅在被替换时工作,内部< router-view> 毫无价值。在子组件的父组件中使用< router-view> 。
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.
此外,您的内部< router-view> 未正确关闭,例如< / router-view>
Also your inner <router-view> is not closed properly like </router-view>
更多推荐
使用CRUD设置激活具有多级嵌套路由的路由器链接
发布评论