我尝试像下面那样设置深度嵌套,我很确定我们不能在 router-link
中为嵌套路由使用 exact
。
<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/:dealId/details
然后激活 Deals
/projects/:projectId/deals/:dealId/commitments/:commitmentId/edit
然后激活 Commitments
最佳答案
我想你没有另一个<router-view></router-view>
里面ProjectDetails
组件添加这个并尝试。
同时删除 /projects/:projectId
来自父路径中已有的所有子路径 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
}
]
}
]
这是工作 fiddle :https://jsfiddle.net/chyLjpv0/16/
阅读更多关于 child path 的信息.
如果您不需要并且组件依赖于父级,请不要将其作为子级直接用作根路径,如
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
}
]
为此工作的 fiddle :https://jsfiddle.net/chyLjpv0/17/
类 router-link-exact-active
已经在这个例子中工作:https://jsfiddle.net/chyLjpv0/18/将链接显示为事件
在您的编辑中
为什么放<router-view>
里面<router-view>
.外部仅在被替换时才工作,内部 <router-view>
毫无值(value)。使用 <router-view>
在子组件的父组件中。
还有你的内心<router-view>
没有像</router-view>
那样正确关闭
关于javascript - 使用 CRUD 设置激活具有多层嵌套路由的路由器链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46987275/