Vue 解决多级动态面包屑导航的问题

2023-08-09 21:25:04 121

固定路由的面包屑导航

我们在配置router的时候，可以将面包屑数据配置在meta中，

例如

路由配置：

{
path:'/project/process/:id',
name:'process',
component:()=>import('@/views/project/process/main.vue'),
meta:[
{name:'项目管理列表'},
{name:'项目列表',url:'/project/list'},
{name:'里程碑'},
],
},

代码：



{{item.name}}

{{item.name}}

如果单纯的是展示，就可以不用写url链接，路由配置成这样

{
path:'/project/process/:id',
name:'process',
component:()=>import('@/views/project/process/main.vue'),
meta:[‘项目管理','项目进度','里程碑'],
},

然后代码：


首页

{{item}}

解决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){
constmeta=to.meta;
for(leti=0;i
在beforeRouteEnter事件中修改meta信息，从而更新面包屑的导航路由。
主要的实现思路就是在目标页面添加beforeRouteEnter事件，然后更改其meta配置信息，从而达到更改面包屑导航路径。
如果你还有更好的解决办法，欢迎留言。
以上这篇Vue解决多级动态面包屑导航的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

Vue 解决多级动态面包屑导航的问题

热门推荐

随机推荐