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 Tools tab(幻灯片)
Jul 14 Javascript
js修改table中Td的值(定义td的单击事件)
Jan 10 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
Jun 02 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
Apr 11 Javascript
推荐10个2014年最佳的jQuery视频插件
Nov 12 Javascript
jQuery中find()方法用法实例
Jan 07 Javascript
jQuery制作简洁的图片轮播效果
Apr 03 Javascript
深入浅析Vue全局组件与局部组件的区别
Jun 15 Javascript
详解为生产环境编译Angular2应用的方法
Dec 10 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
Vue如何提升首屏加载速度实例解析
Jun 25 Javascript
openlayers4.6.5实现距离量测和面积量测
Sep 25 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 远程关机操作的代码
2008/12/05 PHP
php pki加密技术(openssl)详解
2013/07/01 PHP
PHP的error_reporting错误级别变量对照表
2014/07/08 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
JavaScript的Function详细
2006/11/14 Javascript
ASP小贴士/ASP Tips javascript tips可以当桌面
2009/12/10 Javascript
html超链接打开窗口大小的方法
2013/03/05 Javascript
标题过长使用javascript按字节截取字符串
2014/04/24 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
2014/09/09 Javascript
基于jQuery实现文本框缩放以及上下移动功能
2014/11/24 Javascript
js实现右键菜单功能
2016/11/28 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
2017/04/13 Javascript
详解Vue中一种简易路由传参办法
2017/09/15 Javascript
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
element-ui 表格实现单元格可编辑的示例
2018/02/26 Javascript
基于vue实现移动端圆形旋钮插件效果
2018/11/28 Javascript
vue项目中极验验证的使用代码示例
2019/12/03 Javascript
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
python实现用户登陆邮件通知的方法
2015/07/09 Python
python 公共方法汇总解析
2019/09/16 Python
python实现用类读取文件数据并计算矩形面积
2020/01/18 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
德国箱包网上商店:koffer24.de
2016/07/27 全球购物
美国购买当代和现代家具网站:MODTEMPO
2018/07/20 全球购物
Street One瑞士:德国现代时装公司
2019/10/09 全球购物
如何将整数int转换成字串String
2014/03/21 面试题
大学毕业生自荐书怎么写?
2014/01/06 职场文书
函授本科自我鉴定
2014/02/04 职场文书
课前三分钟演讲稿
2014/04/24 职场文书
主题实践活动总结
2014/05/08 职场文书
学习方法演讲稿
2014/05/10 职场文书
环保倡议书格式范文
2014/05/14 职场文书
公司会议策划方案
2014/05/17 职场文书
夫妻分居协议书范本
2014/11/28 职场文书
详解TypeScript的基础类型
2022/02/18 Javascript