Vue 解决多级动态面包屑导航的问题
时间：2022-07-26 10:03:14|栏目：vue|点击： 次
固定路由的面包屑导航
我们在配置router的时候，可以将面包屑数据配置在meta中，
例如
路由配置：
{
path: '/project/process/:id',
name: 'process',
component: () => import('@/views/project/process/main.vue'),
meta: [
{ name: '项目管理列表' },
{ name: '项目列表', url: '/project/list' },
{ name: '里程碑' },
],
},
代码：
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item v-for="(item, index) in $route.meta" :key="index">
<router-link v-if="item.url" :to="item.url">{{item.name}}</router-link>
<a v-else>
{{item.name}}
</a>
</el-breadcrumb-item>
</el-breadcrumb>
如果单纯的是展示，就可以不用写url链接，路由配置成这样
{
path: '/project/process/:id',
name: 'process',
component: () => import('@/views/project/process/main.vue'),
meta: [‘项目管理', '项目进度', '里程碑'],
},
然后代码：
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{path: '/home'}">首页</el-breadcrumb-item>
<el-breadcrumb-item v-for="(item, index) in $route.meta" :key="index">
{{item}}
</el-breadcrumb-item>
</el-breadcrumb>
解决Vue多级动态面包屑导航
针对一些比较固定式的面包屑是很好实现的，但是我们在项目中经常会遇到一些动态路由，
例如： A页面路由为 /list
从A页面跳转到B页面为 /list/:id
B页面下又存在一个字页面， /list/detail
我们在C页面想通过面包屑导航的方式进入B页面怎么办呢？
针对这种动态嵌套多级路由应该怎么处理呢？
配置路由
...
{
path: '/type',
name: 'type',
component: () => import('@/views/type/main.vue'),
meta: [
{ name: '项目分类' },
],
},
{
path: '/type/list/:id',
name: 'list',
component: () => import('@/views/list/type/main.vue'),
meta: [
{ name: '项目分类', url: '/list' },
{ name: '项目列表' },
],
},
{
path: '/list/detail',
name: 'detail',
component: () => import('@/views/type/list/detail/index.vue'),
meta: [
{ name: '项目分类', url: '/list' },
{ name: '项目列表', url: '/type/list' },
{ name: '详情' },
],
},
...
可以看出这个路由没有什么区别，唯一值得注意的一点就是里详情页面，是一个动态的路由，从详情页面跳转到项目列表我们需要相应的id信息，但是此时id我们不能固定填入，而是一个动态的值。
修改detail页面
在milestone页面监听beforeRouteEnter事件
beforeRouteEnter(to, from, next) {
const meta = to.meta;
for (let i = 0; i < meta.length; i++) {
if (meta[i].name === '项目列表') {
meta[i].url = `/type/list/${from.params.id}`;
}
}
next();
},
在beforeRouteEnter事件中修改meta信息，从而更新面包屑的导航路由。
主要的实现思路就是在目标页面添加beforeRouteEnter事件，然后更改其meta配置信息，从而达到更改面包屑导航路径。
如果你还有更好的解决办法，欢迎留言。
上一篇：详解Vue新增内置组件的使用
栏 目：vue
下一篇：vue新手入门出现function () { [native code] }错误的解决方案
本文标题：Vue 解决多级动态面包屑导航的问题
本文地址：http://www.codeinn.net/misctech/208950.html
