Vue动态面包屑功能的实现方法


Posted in Javascript onJuly 01, 2019

面包屑应该是我们在项目中经常使用的一个功能,一般情况下它用来表示我们当前所处的站点位置,也可以帮助我们能够更快的回到上个层级。

今天我们就来聊聊如何在 Vue 的项目中实现面包屑功能。以下案例都是使用 Element-UI 进行实现。

最笨的方式

首先我们想到的最笨的方法就是在每个需要面包屑的页面中固定写好。

<template>
 <div class="example-container">
  <el-breadcrumb separator="/">
   <el-breadcrumb-item
    v-for="(item,index) in breadList"
    :key="index"
    :to="{ path: item.path }"
   >{{item.name}}</el-breadcrumb-item>
  </el-breadcrumb>
 </div>
</template>
<script>
export default {
 name: "Example",
 data() {
  return {
   breadList: [{
     name: "首页",
     path: "/home"
    }, {
     name: "系统设置",
     path: "/setting"
    }, {
     name: "用户管理",
     path: "/setting/usermanage"
    }]
  };
 }
};
</script>

如果按照上述方式去实行的话,虽然我们可以完成面包屑的功能,但是它不够灵活,在每个需要的页面添加,带来的维护成本是巨大的。

最主要的是你们的产品天天变需要咋办,还不累死。有人说登哥我就喜欢这么改,只有这样我才会有工作量。

好吧那当我没说,但是我劝你善良,登哥劝你一句,把那些大量重复的工作尽可能的赶紧做完,剩下的时间你才能自由安排,进行充能呀。

否则,你拿什么进步?普通的人总是喜欢抱怨没有时间,而优秀的人就是这么把时间省下来的。他们知道什么事情重要,什么事情不重要。

不过还是有人会说我就想安安静静写写代码,其他的我不想。那也行,不过这样写显然不够逼格。

利用 路由元信息

上面的方法,非常的不够逼格,显然不是我们想要的,那我们再来看看第二种实现方式。

我们可以把路径结构配置在 Route meta 属性中。

const router = new Router({
 routes: [{
   path: '/example',
   name: 'example',
   component: Example,
   meta: {
    breadList: [{
      name: "首页",
      path: "/home"
     }, {
      name: "系统设置",
      path: "/setting"
     }, {
      name: "用户管理",
      path: "/setting/usermanage"
     }]
   }
  }
 ]
});
export default router;

然后我们直接在页面中使用计算属性获取数据。

<template>
 //...省略
</template>
<script>
export default {
 name: "Example",
 computed: {
  breadList() {
   return this.$route.meta.breadList || [];
  }
 }
};
</script>

这样也能实现我要想的效果,但是这个还是显得比较冗余,路由数据已经定义好一次结构,还要加上一个专门的面包屑数据,造成代码的重复,还是不够逼格。

那接下来登哥教你一招比较有逼格的。准备好小本本记下来。

路由对象 matched 属性

首先我们先来看看官方对 matched 的介绍。

matched:返回一个数组,包含当前路由的所有嵌套路径片段的路由记录 。

可以看到当我们定义好路由结构以后,我们就可以获取到当前页面的路由记录。

首先我们先创建一个面包屑的组件。

//Breadcrumb.vue
<script>
export default {
 data() {
  return {
   breadList: [] // 路由集合
  };
 },
 watch: {
  $route() {
   this.getBreadcrumb();
  }
 },
 methods: {
  isHome(route) {
   return route.name === "home";
  },
  getBreadcrumb() {
   let matched = this.$route.matched;
   //如果不是首页
   if (!this.isHome(matched[0])) {
    matched = [{ path: "/home", meta: { title: "首页" } }].concat(matched);
   }
   this.breadList = matched;
  }
 },
 created() {
  this.getBreadcrumb();
 }
};
</script>

创建完组件之后,在需要的地方注入即可。如果你的网页结构布局合理恰当的话只需要一处引用就可以所有网页使用啦。

真可谓 “一处代码供全局”。

定义的路由信息如下:

const router = new Router({
 routes: [
  {
   path: '/',
   redirect: '/home'
  },
  {
   path: '/home',
   name: 'home',
   component: Home,
   meta: { title: '首页' }
  },
  {
   path: '/setting',
   name: "setting",
   component: () => import('./views/setting/Setting.vue'),
   redirect: '/setting/user',
   meta: { title: '系统设置' },
   children: [{
    path: 'user',
    component: () => import('./views/setting/UserMange.vue'),
    name: 'usermanage',
    meta: { title: '用户管理' }
   }, {
    path: 'message',
    component: () => import('./views/setting/MesMange.vue'),
    name: 'mesmanage',
    meta: { title: '短信管理' }
   }]
  },
  {
   path: '/example',
   name: 'example',
   component: Example,
   meta: { title: '综合实例' }
  }
 ]
});
export default router;

可以看到我们非常灵活的实现出我们需要的效果。可能这个功能并没有完善,比如有些页面不需要怎么办?

其实只要我们过滤下数据就可以实现,比如利用 meta 不存在时面包屑数据置空,或者增加一个数据标示面包屑的现实隐藏。等等都是一种思路。小伙伴们不妨发挥自己的想象试试吧。

看十遍不如自己撸一遍。这样很快就能掌握知识点。最后上下效果图给大家观摩。

Vue动态面包屑功能的实现方法

总结

以上所述是小编给大家介绍的Vue动态面包屑功能的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
Mar 27 Javascript
jQuery实现切换页面布局使用介绍
Oct 09 Javascript
JS中Iframe之间传值的方法
Mar 11 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
Dec 30 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
Jul 02 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
Sep 01 Javascript
jquery操作复选框checkbox的方法汇总
Feb 05 Javascript
详解JavaScript中shift()方法的使用
Jun 09 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
Nov 20 Javascript
学习vue.js表单控件绑定操作
Dec 05 Javascript
js仿京东轮播效果 选项卡套选项卡使用
Jan 12 Javascript
Vue+webpack项目基础配置教程
Feb 12 Javascript
vue实现自定义H5视频播放器的方法步骤
Jul 01 #Javascript
基于Vue SEO的四种方案(小结)
Jul 01 #Javascript
JavaScript一元正号运算符示例代码
Jun 30 #Javascript
重学JS之显示强制类型转换详解
Jun 30 #Javascript
JavaScript判断浏览器运行环境的详细方法
Jun 30 #Javascript
微信小程序如何自定义table组件
Jun 29 #Javascript
微信小程序如何调用图片接口API并居中显示
Jun 29 #Javascript
You might like
PHP 高手之路(二)
2006/10/09 PHP
PHP清除数组中所有字符串两端空格的方法
2014/10/20 PHP
php中上传文件的的解决方案
2018/09/25 PHP
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
10个新的最有前途的JavaScript框架
2009/03/12 Javascript
基于jquery的blockui插件显示弹出层
2011/04/14 Javascript
图片img的src不变让浏览器重新加载实现方法
2013/03/29 Javascript
Node.js生成HttpStatusCode辅助类发布到npm
2013/04/09 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
2013/04/15 Javascript
Javascript call和apply区别及使用方法
2013/11/14 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
2014/03/22 Javascript
jQuery中的read和JavaScript中的onload函数的区别
2014/08/27 Javascript
使用js获取图片原始尺寸
2014/12/03 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
2015/10/26 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
2016/01/04 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
2016/12/08 Javascript
AngularJS中run方法的巧妙运用
2017/01/04 Javascript
Angularjs实现多图片上传预览功能
2018/07/18 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
2019/04/11 Javascript
Python正则简单实例分析
2017/03/21 Python
在Python运行时动态查看进程内部信息的方法
2019/02/22 Python
python如何使用Redis构建分布式锁
2020/01/16 Python
python 最简单的实现适配器设计模式的示例
2020/06/30 Python
基于CentOS搭建Python Django环境过程解析
2020/08/24 Python
python+requests接口自动化框架的实现
2020/08/31 Python
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
2015/03/17 HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
2014/04/14 HTML / CSS
HTML5+lufylegend实现游戏中的卷轴
2016/02/29 HTML / CSS
Vector, ArrayList, HashTable, HashMap哪些是线程安全的,哪些不是
2015/10/12 面试题
医学生实习自我鉴定
2013/09/27 职场文书
毕业生毕业总结的自我评价范文
2013/11/02 职场文书
公司任命书模板
2014/06/06 职场文书
学校搬迁方案
2014/06/15 职场文书
2015年秋学期师德师风建设工作总结
2015/10/23 职场文书
浅谈PHP7中的一些小技巧
2021/05/29 PHP
详解Java实践之适配器模式
2021/06/18 Java/Android