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 相关文章推荐
JavaScript中:表达式和语句的区别[译]
Sep 17 Javascript
JS中图片缓冲loading技术的实例代码
Aug 29 Javascript
JQuery表单验证插件EasyValidator用法分析
Nov 15 Javascript
javascript匀速运动实现方法分析
Jan 08 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
Jan 26 Javascript
浅谈String.valueOf()方法的使用
Jun 06 Javascript
jQuery css() 方法动态修改CSS属性
Sep 25 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
Sep 29 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
Dec 17 Javascript
JS三目运算(三元运算)方法详解
Mar 01 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
Sep 12 Javascript
JS寄快递地址智能解析的实现代码
Jul 16 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
jQuery学习笔记之jQuery选择器的使用
2010/12/22 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
用jQuery模拟select下拉框的简单示例代码
2014/01/26 Javascript
JavaScript的各种常见函数定义方法
2014/09/16 Javascript
JavaScript跨域方法汇总
2014/10/16 Javascript
JavaScript使用Prototype实现面向对象的方法
2015/04/14 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
2015/05/14 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
2015/08/20 Javascript
js实现遍历含有input的table实例
2015/12/07 Javascript
AngularJS基础 ng-options 指令详解
2016/08/02 Javascript
JS组件系列之JS组件封装过程详解
2017/04/28 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
2018/01/05 Javascript
Vue组件库发布到npm详解
2018/02/17 Javascript
vue js秒转天数小时分钟秒的实例代码
2018/08/08 Javascript
使用react render props实现倒计时的示例代码
2018/12/06 Javascript
angular 实现下拉列表组件的示例代码
2019/03/09 Javascript
Vue实例的对象参数options的几个常用选项详解
2019/11/08 Javascript
vue quill editor 使用富文本添加上传音频功能
2020/01/14 Javascript
理解Python中的With语句
2015/02/02 Python
Windows下实现Python2和Python3两个版共存的方法
2015/06/12 Python
python 实现分页显示从es中获取的数据方法
2018/12/26 Python
解决python flask中config配置管理的问题
2019/07/26 Python
Python对接六大主流数据库(只需三步)
2019/07/31 Python
python 协程中的迭代器,生成器原理及应用实例详解
2019/10/28 Python
Django框架配置mysql数据库实现过程
2020/04/22 Python
解决python cv2.imread 读取中文路径的图片返回为None的问题
2020/06/02 Python
使用CSS3的rem属性制作响应式页面布局的要点解析
2016/05/24 HTML / CSS
CSS3中设置3D变形的transform-style属性详解
2016/05/23 HTML / CSS
CSS3 实现图形下落动画效果
2020/11/13 HTML / CSS
linux面试题参考答案(5)
2014/09/01 面试题
工程地质勘察专业大学生求职信
2013/10/13 职场文书
工艺技术员岗位职责
2015/02/04 职场文书
质量负责人岗位职责
2015/02/15 职场文书
Vue3中的Refs和Ref详情
2021/11/11 Vue.js
vue生命周期钩子函数以及触发时机
2022/04/26 Vue.js