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 toFixed() 方法
Apr 15 Javascript
10个基于浏览器的JavaScript调试工具分享
Feb 07 Javascript
jquery 字符串切割函数substring的用法说明
Feb 11 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
Apr 29 Javascript
jQuery实现磁力图片跟随效果完整示例
Sep 16 Javascript
vue.js 表格分页ajax 异步加载数据
Oct 18 Javascript
jQuery Ztree行政地区树状展示(点击加载)
Nov 09 Javascript
jQuery加载及解析XML文件的方法实例分析
Jan 22 Javascript
JS中跳出循环的示例代码
Sep 14 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
Dec 25 Javascript
使用canvas实现一个vue弹幕组件功能
Nov 30 Javascript
微信小程序基于picker实现级联菜单
Feb 15 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
一个颜色轮换的简单例子
2006/10/09 PHP
PHP 截取字符串专题集合
2010/08/19 PHP
php数据库抽象层 PDO
2011/05/07 PHP
Erlang的运算符(比较运算符,数值运算符,移位运算符,逻辑运算符)
2012/07/23 PHP
PHP设计模式之观察者模式实例
2016/02/22 PHP
PHP的openssl加密扩展使用小结(推荐)
2016/07/18 PHP
thinkPHP中验证码的简单实现方法
2016/12/05 PHP
PHP匿名函数(闭包函数)详解
2019/03/22 PHP
List the UTC Time on a Computer
2007/06/11 Javascript
javascript removeChild 使用注意事项
2009/04/11 Javascript
jQuery遍历Form示例代码
2013/09/03 Javascript
js判断为空Null与字符串为空简写方法
2014/02/24 Javascript
javascript闭包入门示例
2014/04/30 Javascript
jquery简单实现外部链接用新窗口打开的方法
2015/05/30 Javascript
Webpack 实现 AngularJS 的延迟加载
2016/03/02 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
JavaScript获取select中text值的方法
2017/02/13 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
2018/08/31 Javascript
小程序自定义日历效果
2018/12/29 Javascript
微信接入之获取用户头像的方法步骤
2019/09/23 Javascript
python安装PIL模块时Unable to find vcvarsall.bat错误的解决方法
2016/09/19 Python
python @property的用法及含义全面解析
2018/02/01 Python
python实现远程控制电脑
2019/05/23 Python
Python实现的爬取豆瓣电影信息功能案例
2019/09/15 Python
python实现与redis交互操作详解
2020/04/21 Python
浅谈keras通过model.fit_generator训练模型(节省内存)
2020/06/17 Python
python爬虫scrapy基于CrawlSpider类的全站数据爬取示例解析
2021/02/20 Python
华为c/c++笔试题
2016/01/25 面试题
应届生煤化工求职信
2013/10/21 职场文书
信息技术培训感言
2014/03/06 职场文书
保证书格式范文
2014/04/28 职场文书
2014乡镇党委副书记对照检查材料思想汇报
2014/10/09 职场文书
公安机关查摆剖析材料
2014/10/10 职场文书
医院财务人员岗位职责
2015/04/14 职场文书
CSS3通过var()和calc()函数实现动画特效
2021/03/30 HTML / CSS
MySQL 全文索引使用指南
2021/05/25 MySQL