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 相关文章推荐
jquery 插件 人性化的消息显示
Jan 21 Javascript
javascript来定义类的规范小结
Nov 19 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
Jan 06 Javascript
js 事件截取enter按键页面提交事件示例代码
Mar 04 Javascript
js对文章内容进行分页示例代码
Mar 05 Javascript
javascript闭包传参和事件的循环绑定示例探讨
Apr 17 Javascript
Javascript打印局部页面实例
Jun 21 Javascript
什么是JavaScript注入攻击?
Sep 14 Javascript
js实现文字无缝向上滚动
Feb 16 Javascript
js时间查询插件使用详解
Apr 07 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
Dec 08 Javascript
JavaScript实现计算多边形质心的方法示例
Jan 31 Javascript
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
MOTOROLA 摩托罗拉 MODEL 66-XI五灯中波收音机
2021/03/02 无线电
火车头采集器3.0采集图文教程
2007/03/17 PHP
php对csv文件的读取,写入,输出下载操作详解
2013/08/10 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
PHP验证码无法显示的原因及解决办法
2017/08/11 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
JScript内置对象Array中元素的删除方法
2007/03/08 Javascript
javascript 点击整页变灰的效果(可做退出效果)。
2008/01/09 Javascript
js获取鼠标位置实例详解
2015/12/09 Javascript
使用jquery提交form表单并自定义action的实现代码
2016/05/25 Javascript
jQuery使用ajax_动力节点Java学院整理
2017/07/05 jQuery
vue.js中父组件调用子组件的内部方法示例
2017/10/22 Javascript
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
Vue使用json-server进行后端数据模拟功能
2018/04/17 Javascript
vue2单元测试环境搭建
2018/05/24 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
2019/05/10 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
2019/07/05 Javascript
关于Vue中axios的封装实例详解
2019/10/20 Javascript
jQuery实现动态向上滚动
2020/12/21 jQuery
Python2.x版本中cmp()方法的使用教程
2015/05/14 Python
python实现高斯(Gauss)迭代法的例子
2019/11/20 Python
python爬取音频下载的示例代码
2020/10/19 Python
纯CSS实现聊天框小尖角、气泡效果
2014/04/04 HTML / CSS
The North Face北面英国官网:美国著名户外品牌
2017/12/13 全球购物
Agoda台湾官网:国内外订房2折起
2018/03/20 全球购物
五一手机促销方案
2014/03/08 职场文书
创业女性典型材料
2014/05/02 职场文书
班风口号
2014/06/18 职场文书
创先争优标语
2014/06/27 职场文书
财务工作疏忽检讨书
2014/09/11 职场文书
学生未请假就回家检讨书
2014/09/22 职场文书
2015年世界无烟日活动方案
2015/05/04 职场文书
幼儿园小朋友毕业感言
2015/07/30 职场文书
导游词之江苏溱潼古镇
2019/11/27 职场文书
SQL Server代理:理解SQL代理错误日志处理方法
2021/06/30 SQL Server