南昌小程序价格_Vue 解决多级动态面包屑导航的问题

Vue 解决多级动态面包屑导航的问题       今天小编就为大家分享一篇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- 
 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}}
 /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 解决多级动态面包屑导航的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持凡科。


相关阅读