这里我要自我检讨一下,我根据自己的认知对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没有检测到二级路由的变化一样

Logo

前往低代码交流专区

更多推荐