面包屑应该是我们在项目中经常使用的功能。一般来说，它用于指示我们当前的站点位置，也可以帮助我们更快地回到以前的水平。

今天我们就来说说如何在Vue项目中实现面包屑功能。以下情况是使用元素用户界面实现的。

最愚蠢的方式

首先，我们能想到的最愚蠢的方法就是把它写在每一页需要面包屑的地方。

template div class=' example-container ' El-面包屑分隔符='/' El-面包屑-item v-for='(item，index)在面包屑列表' : key=' index ' : to=' { path : item . path } ' { { item . name } }/El-面包屑-item/El-面包屑/div/Templatescriptexportdefault { name : ' example '，data(){ return {面包屑列表3:[{ name 3360 ' home page}};如果/script以上述方式实现，虽然我们可以完成面包屑的功能，但不够灵活，将其添加到每个需要的页面带来的维护成本巨大。

最重要的是，如果你的产品每天都在变化，应该怎么做。有人说我喜欢这种变化。只有这样我才能有工作量。

好吧，算了，但我劝你要善良。邓哥建议你尽快完成很多重复性的工作，剩下的时间可以自由安排和充电。

否则，你有什么进步？普通人总是喜欢抱怨自己没有时间，而优秀的人就是这样节约时间的。他们知道什么是重要的，什么不是。

但是，有人会说，我就是想安安静静地写代码，别的什么都不要。那很好，但是它显然不够强。

使用路由元信息

上面的方法不够强大，这显然不是我们想要的，所以我们来看看第二个实现。

我们可以在路由元属性中配置路径结构。

const Router=new Router({ routers :[{ path : '/Example '，name: 'example '，component: Example，Meta: {面包屑列表：[{ name 3: '主页'，path: '/home' }，{name: '系统设置'，path : '/设置' }，{ name 3: '用户管理'，path 3: '/设置。导出默认路由器；然后，我们使用计算出的属性直接从页面获取数据。

模板/.省略/templatescriptexportdefault { name : ' example '，computed: {面包屑列表(){return this。$ route.meta .面包屑列表| |[]；} }};/脚本也能达到我想要的效果，但这一个还是多余的。路由数据已经定义了一次，需要添加一个特殊的面包屑数据，这导致代码重复，但仍然不够。

然后戈登会教你一个更有说服力的技巧。准备一本小书并写下来。

路由对象的匹配属性

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

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

可以看到，在我们定义了路由结构之后，就可以得到当前页面的路由记录。

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

//bread crumb . vuescriptorexport default { data(){ return { bread list :[]//routing set }；}，watch : { $ route(){ this .get面包屑()；} }，methods : { IsHome(route){ return route . name===' home '；}，get面包屑(){ let matched=this。$ route.matched//如果不是第一页如果(！这个。是home(matched[0])){ matched=[{ path : '/home '，meta 3360 { title : ' home page ' } }]。concat(匹配的)；} this .面包屑列表=匹配；} }，created(){ this . GetBread()；}};/script创建组件后，在需要的地方注入它。如果你的网页结构布局合理合适，那么你可以只使用一个引用来使用所有的网页。

可谓“天下一码”。

路由信息的定义如下：

const Router=new Router({ routers :[{ path : '/'，redirect: '/home' }，{ path: '/home '，name: 'home '，component: Home，meta : { title : ' Home page ' } }，{path :'/setting '，name :' setting '，component : ()=import('。/view/setting/setting . vue ')，Redirect :'/setting/user '，meta : { title : ' system setting ' }，children : [{path :' user '，Component: ()=import ' ./view/setting/user mange . vue ')，name:' usermanage '，meta : { title 3360 ' user management ' } }，{path3360' message '，Component: ()=import('。/view/setting/mesmange . vue ')、name:' mesmanage '、meta: {title : ' SMS management ' } } } })、{path: '/example '、Name :' example '、component : example、meta : { title : '综合示例' } }))；导出默认路由器；可以看出，我们非常灵活，以达到我们需要的效果。可能这个功能还不完善，比如有些页面不需要了怎么办？

其实只能通过过滤数据来实现，比如在元不存在的时候用面包屑数据清空，或者添加一个数据来标记面包屑的现实隐藏。等等都是一种思维。小伙伴们不妨试试自己的想象力。

自己读比读十遍好。这样，我们可以快速掌握知识点。最后会给大家展示上下效果图。

摘要

以上就是边肖介绍的Vue动态面包屑功能的实现方法。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！