使用 CRUD 设置激活具有多级嵌套路由的路由器链接 [英] Activate router-link that has multi level nested routes with CRUD setup
问题描述
我尝试像下面那样设置深度嵌套,我有点确定我们不能在 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
里面没有另一个
代码> 组件添加此并尝试.
同时从所有子路径中删除 /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/',组件:承诺编辑}]}]
这是工作小提琴:https://jsfiddle.net/chyLjpv0/16/>
阅读有关子路径的更多信息.
如果您不需要并且组件依赖于父级,请不要将其作为子级直接用作根路径,如
路线:[{小路: '/',组件:仪表板},{路径:'/项目',组成部分:项目},{路径:'/projects/:id',组件:项目详细信息,},//交易{路径:'/projects/:projectId/deals/:dealId/details',组件:DealDetails},{路径:'/projects/:projectId/deals',组成部分:优惠},//承诺{路径:'/projects/:projectId/deals/:dealId/commitments/:commitmentId/edit/',组件:承诺编辑}]
为此工作:https://jsfiddle.net/chyLjpv0/17/>
Class router-link-exact-active
已经在这个例子中工作了:https://jsfiddle.net/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 : https://jsfiddle.net/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 : https://jsfiddle.net/chyLjpv0/17/
Class router-link-exact-active
is already working in this example : https://jsfiddle.net/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>
这篇关于使用 CRUD 设置激活具有多级嵌套路由的路由器链接的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!