重复导航到当前位置引起的。Vue Router 提供了一种机制,阻止重复导航到相同的路由路径。

重复导航到当前位置引起的。Vue Router 提供了一种机制,阻止重复导航到相同的路由路径。_第1张图片

代码: 

  
        
          
            
              
              首页
            
            
              
              个人中心
            
            
              
              个人成绩
            
            
              
              成绩管理
            
          
            
              
              人员管理
            
          
        

路由:

const routes = [
	

	{
		path: '/home',//路由地址
		name: 'home',
		component: home,//相对应的组件
		redirect: { name: "first" },
		children: [
			{
				path: '/first',
				name: 'first',
				component: first
			},
			{
				path: '/person',
				name: 'person',
				component: person
			},
			{
				path: '/personal',
				name: 'personal',
				component: personal
			},
			{
				path: '/score',
				name: 'score',
				component: score
			},
			{
				path: '/manage',
				name: 'manage',
				component: manage
			}
		]
	}

]

目录 

 重复导航到当前位置引起的。Vue Router 提供了一种机制,阻止重复导航到相同的路由路径。_第2张图片

解决方法:判断目标路径是否与当前路径相同

通过 this.$route.path 获取到当前路由的路径

 handleMenuSelect(index) {
      const targetPath = '/' + index;
      
      // 判断目标路径是否与当前路径相同
      //通过 this.$route.path 获取到当前路由的路径
      if (this.$route.path === targetPath) {
        // 如果相同则不进行导航
        return;
      }
      
      // 否则进行导航
      this.$router.push({ path: targetPath });
    }

你可能感兴趣的:(vue.js,elementui,javascript)