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

更新时间：2019年07月01日 10:13:19 作者：六小登登

面包屑功能是我们在项目中经常遇到的功能，今天小编使用Element-UI 进行实现在vue项目中实现面包屑功能，具体实现方式大家跟随小编一起学习吧

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

今天我们就来聊聊如何在 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实现简单选项卡功能
这篇文章主要为大家详细介绍了Vue实现简单选项卡功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
vue如何使用process.env搭建自定义运行环境
这篇文章主要介绍了vue如何使用process.env搭建自定义运行环境，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
vue + qiankun 项目搭建过程
这篇文章主要介绍了vue + qiankun 项目搭建,首先是通过cli3构建vue2项目，通过qiankun改造主应用，本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-03-03
vue中组件传参的几种常用方法举例
这篇文章主要给大家介绍了关于vue中组件传参的几种常用方法,Vue组件传参方也是面试最常考的内容,文中通过代码实例介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-08-08
Vue动态面包屑功能的实现方法
面包屑功能是我们在项目中经常遇到的功能，今天小编使用Element-UI 进行实现在vue项目中实现面包屑功能，具体实现方式大家跟随小编一起学习吧
2019-07-07
使用vue初用antd 用v-model来双向绑定Form表单问题
这篇文章主要介绍了使用vue初用antd 用v-model来双向绑定Form表单问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
关于vue2强制刷新,解决页面不会重新渲染的问题
今天小编就为大家分享一篇关于vue2强制刷新,解决页面不会重新渲染的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中，如果图片较多，篇幅太长，就会比较烦恼，接下来通过本文给大家介绍vue-quill-editor上传内容由于图片是base64的导致字符太长的问题及解决方法,需要的朋友可以参考下
2018-08-08
让你一看就明白的$nextTick讲解
在我们用vue时,我们经常用到一个方法是this.$nextTick,相信你也用过,我常用的场景是在进行获取数据后,需要对新视图进行下一步操作或者其他操作时,发现获取不到dom,这篇文章主要给大家介绍了关于$nextTick的相关资料,需要的朋友可以参考下
2021-07-07
vue项目在webpack2实现移动端字体自适配功能
这篇文章主要介绍了vue项目在webpack2实现移动端字体自适配的相关知识，本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-06-06