正如前面的照片所示，实现这样的面包屑导航并实际利用$route的matched属性很简单。
首先，定义路由表，然后实现演示。
let routes=[ { path: '/'，component : (]=import (./pages/layout/layout.vue )，children : ({纽约) children : [ { name : ' page aa01 '，path:'aa-01 '，component: PageAA01 }，{ name 33660 page aaa01 } path : {name:'pageaa03 '，path:'aa-03 '，component: PageAA03 }
如果当前根是/a/aa-01，则this.$route.matched将匹配包含三个路径的根信息“/”、“/a”和“/a/aa-01”的数组。
然后，可以直接使用路由信息渲染面包屑导航。
templatedivclass=' nav-wrap ' router-linkv-for=' (item，index ) in navlist ' 3360 key=' index ' { item.name }='/' 3360 ' }/router-link/div/templatescriptexportdefault { data (}/data navlist 3360 () }， watch: { //监听根(每次更改面包屑导航时更新) route: ) Handler ) this.getnavlist(}， immediate3360true )、mounted ) )/methods: { //面包屑导航getNavList () const data=this.$ route.matched.filter this.navlist=data }/script logthis.$ route.matched.filter (item=item.name )！
虽然与elementUI el-breadcrumb组件配合使用很方便，但需要进行一些修改。