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


Posted in Javascript onNovember 04, 2019

固定路由的面包屑导航

我们在配置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 解决多级动态面包屑导航的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE 下Enter提交表单存在重复提交问题的解决方法
May 04 Javascript
JS实现让网页背景图片斜向移动的方法
Feb 25 Javascript
编写高性能Javascript代码的N条建议
Oct 12 Javascript
Bootstrap3制作图片轮播效果
May 12 Javascript
JS实现两周内自动登录功能
Mar 23 Javascript
Node.js安装配置图文教程
May 10 Javascript
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
Vue filter介绍及其使用详解
Oct 21 Javascript
小程序云开发部署攻略(图文教程)
Oct 30 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
Sep 15 Javascript
typescript配置alias的详细步骤
Aug 12 Javascript
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
vue+elementUI动态生成面包屑导航教程
Nov 04 #Javascript
VUE+elementui面包屑实现动态路由详解
Nov 04 #Javascript
Vuex,iView UI面包屑导航使用扩展详解
Nov 04 #Javascript
vue双向绑定数据限制长度的方法
Nov 04 #Javascript
使用p5.js临摹动态图片
Nov 04 #Javascript
p5.js绘制创意自画像
Nov 04 #Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
Nov 04 #Javascript
You might like
php中flush()、ob_flush()、ob_end_flush()的区别介绍
2013/02/17 PHP
Symfony2开发之控制器用法实例分析
2016/02/05 PHP
PHP命令行执行整合pathinfo模拟定时任务实例
2016/08/12 PHP
Yii2 queue的队列使用详解
2019/07/19 PHP
解决laravel中日志权限莫名变成了root的问题
2019/10/17 PHP
javascript 有趣而诡异的数组
2009/04/06 Javascript
js下将字符串当函数执行的方法
2011/07/13 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
2015/10/26 Javascript
AngularJS入门教程之AngularJS指令
2016/04/18 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
2016/07/11 Javascript
AngularJS 所有版本下载地址
2016/09/14 Javascript
BootStrap 页签切换失效的解决方法
2017/08/17 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
2018/05/09 jQuery
分享5个好用的javascript文件上传插件
2018/09/16 Javascript
js数组去重的方法总结
2019/01/18 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
2020/04/13 Javascript
JS如何操作DOM基于表格动态展示数据
2020/10/15 Javascript
微信小程序input抖动问题的修复方法
2021/03/03 Javascript
[03:44]2015国际邀请赛选手档案—Cloud9.NoTail
2015/07/28 DOTA
[01:04:14]VP vs TNC 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[45:17]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第三场 1月9日
2021/03/11 DOTA
Python简单实现enum功能的方法
2016/04/25 Python
Python使用爬虫抓取美女图片并保存到本地的方法【测试可用】
2018/08/30 Python
python实现画出e指数函数的图像
2019/11/21 Python
Tensorflow限制CPU个数实例
2020/02/06 Python
使用keras根据层名称来初始化网络
2020/05/21 Python
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
澳大利亚在线消费电子产品商店:TobyDeals
2020/01/05 全球购物
介绍下java.util.Arrays类
2012/10/16 面试题
水利学院求职自荐书
2014/02/01 职场文书
协议书格式
2014/04/23 职场文书
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
2021/05/25 HTML / CSS
python 开心网和豆瓣日记爬取的小爬虫
2021/05/29 Python
通过Python把学姐照片做成拼图游戏
2022/02/15 Python
Redis 的查询很快的原因解析及Redis 如何保证查询的高效
2022/03/16 Redis