我一直卡在最好的方式来管理Vue 2中的头导航，vuex与Vue路由器。我有一个主要的标题类型导航在我的pp.vue
<div id="nav">
<!--Try and create a dynamic nav-->
<span v-for="route in routes" :key="route.to">
<router-link :to="`${route.to}`">{{route.text}}</router-link> |
</span>
</div>
<b-container>
<router-view />
</b-container>
</div>
我希望用户能够在页面中导航，并进入视图中的其他视图和组件。我可以更新“路由”数组以推送它们所在的当前位置。显然，这不是Vue，因为它需要某种类型的全局变量。我很好奇，当您使用嵌套路由时，更新标题导航的最佳方法是什么。
路线示例：
{
path: '/Teams',
name: 'Teams',
component: Teams
},
{
path: '/:teamName/Athletes',
name: 'Athletes',
component: Athletes
},
{
path: '/:teamName/Athletes/:id',
name: 'Athlete',
component: Athlete
}
我想要的是，当你在运动员页面上时，你可以在应用程序上找到返回运动员的路线。vue标题导航，该导航与所选的：teamName一起动态显示。如有必要，可以删除并添加这些内容。
用户故事/团队示例-
使用Vuex似乎可以简化您的工作：
将您的路线置于以下状态：
// ...
state: {
routes: [{
path: '/Teams',
name: 'Teams',
}]
}
/团队-
// ...
mutations: {
deafultRoute(state, payload) {
state.routes = state.routes.slice(0, 1); // Be sure to have only 1 route
}
}
/第1组/阿瑟尔特-
// ...
mutations: {
addTeamRoute (state, payload) {
state.routes = state.routes.slice(0, 2); // Be sure to have only 2 routes
let newPAth = {
path: `/${payloadteamName}/Athletes`,
name: 'Athletes'
}
state.routes[1] = newPAth
}
}
/Team1/Athlete/1.-
// ...
mutations: {
addAthleteRoute (state, payload) {
state.routes = state.routes.slice(0, 3);
let newPAth = {
path: `/${payload.teamName}/Athletes/${payload.id}`,
name: 'Athlete'
}
state.routes[2] = newPAth
}
}
我认为您不需要在routes数组上保存组件。
我是这样做的：
{
path: '/Teams',
name: 'Teams',
component: Teams,
meta: {
module:'Teams'
}
}
然后，您可以使用元属性来引导您的“返回”（以及其他内容）
