版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/smalCat/article/details/85877445
这里我要自我检讨一下，我根据自己的认知对vue-router的路径进行保存，花费时间和精力，这里 我贴出一段我自己的代码
我的理解是这样的
// 首先获取当前路由对象
let route = this.$route.matched.pop();
getRouterBran (route ) {
// 检测当前路由是否为一级路由，一级路由我不会写name属性，
if (!router.name) return // 检测到 router.name === 'undefined' 截断函数
//不是 则进行下一步
let obj = {name:router.name,path:router.path}
// 把this.navPath内的所有值转换成字符，以便检测当前数组中是否已有路由对象
let matech = this.navPath.map(val => {
return JSON.stringify(val)
})
// 检测是否已有对象
if (!matech.includes(JSON.stringify(obj))) {
// 没有，加入数组
this.navPath.push(obj)
//判断当前路由是否有父级
if (router.parent) {
// 有，则有两种情况，父级为一级路由，父级不为一级路由
// 为一级路由，则截断函数
if(!router.parent.name) return
// 不为一级，则递归继续往上查找，并添加路径
this.getBreadcrumb(router.parent)
}
}
//将获取到的路径倒转，得到正常路径
this.navPath = this.navPath.reverse()
}
//然后将这个方法放在
created () {
this.getRouterBran(this.$route.matched.pop())
},
watch:{
$router () {
this.getRouterBran(this.$route.matched.pop())
}
}
这个方法，得到了我想要的面包屑，但是，我发现，我的二级路由视图根本没有效果，router-view标签没有效果
而且Vue还不报错，路由也不报错，当我满心欢喜的去点面包屑，发现，面包屑是有效果的，但是路由调到二级页面，二级路由压根就不知道你点了你说的是啥，但是路由的URL又是跳了的
在这里，我表示很方，查找了一个下午，我终是没有查到原因
解决并作出面包屑的效果
这里UI方面我使用了elementUI的面包屑UI组件
如下：
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item v-for ='(item, index) in navPath':to="item.path" :key='index'>{{item.name}}</el-breadcrumb-item>
</el-breadcrumb>
然后js代码：
getRouterBran () {
//$route.matched属性 包含当前路由的所有 嵌套路径片段 的路由记录
// 当 URL 为 /foo/bar，$route.matched 将会是一个包含从上到下的所有嵌套路由对象 (副本)，比如上面路由为二级路由，
// 那么$route.matched的值为[{foo路由对象}，{bar路由对象}]
//当url地址为/foo
// 那么$route.matched的值为[{foo路由对象}]
//当url地址为/home
// 那么$route.matched的值为[{home路由对象}]
let matche = this.$route.matched()
//所以 我这里以 /foo/bar为列
// 得到嵌套的路由对象记录，筛选排除一些路由，条件自定
// 我这里是筛选排除不带name 的路由，自己决定
matche = matche.filter(item => item.name)
this.navPath = matche
}
实际代码就是这么多，三行 脑力的教训啊，使用轮子，还是多看别人的文档，
我写的方法，是可以做出来面包屑的，但是二级路由就是不能渲染出来，就好像router-view没有检测到二级路由的变化一样