关于 vue 的路由层级 ,用来制作面包屑
这里我要自我检讨一下,我根据自己的认知对vue-router的路径进行保存,花费时间和精力,这里 我贴出一段错误代码我的理解是这样的// 首先获取当前路由对象let route = this.$route.matched.pop();getRouterBran (route ) {// 检测当前路由是否为一级路由,一级路由我不会写name属性,if (!rou...
·
这里我要自我检讨一下,我根据自己的认知对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没有检测到二级路由的变化一样
更多推荐
已为社区贡献3条内容
所有评论(0)