代碼：?

  <!-- 側(cè)邊欄 -->
        <el-col :span="12" :style="{ 'width': '200px' }">
          <el-menu default-active="first" class="el-menu-vertical-demo" @select="handleMenuSelect">
            <el-menu-item index="first">
              <i class="el-icon-menu"></i>
              <span slot="title">首頁</span>
            </el-menu-item>
            <el-menu-item index="person">
              <i class="el-icon-menu"></i>
              <span slot="title">個人中心</span>
            </el-menu-item>
            <el-menu-item index="score">
              <i class="el-icon-document"></i>
              <span slot="title">個人成績</span>
            </el-menu-item>
            <el-menu-item index="personal">
              <i class="el-icon-document"></i>
              <span slot="title">成績管理</span>
            </el-menu-item>
          
            <el-menu-item index="manage">
              <i class="el-icon-setting"></i>
              <span slot="title">人員管理</span>
            </el-menu-item>
          </el-menu>
        </el-col>
<script>
export default {
  methods: {
    handleMenuSelect(index) {
      this.$router.push({ path: '/' + index });
    }
  }
};
</script>

路由：

const routes = [
	

	{
		path: '/home',//路由地址
		name: 'home',
		component: home,//相對應(yīng)的組件
		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
			}
		]
	}

]

目錄?

?

解決方法：判斷目標(biāo)路徑是否與當(dāng)前路徑相同

通過 this.$route.path 獲取到當(dāng)前路由的路徑文章來源地址http://www.zghlxwxcb.cn/news/detail-826392.html

 handleMenuSelect(index) {
      const targetPath = '/' + index;
      
      // 判斷目標(biāo)路徑是否與當(dāng)前路徑相同
      //通過 this.$route.path 獲取到當(dāng)前路由的路徑
      if (this.$route.path === targetPath) {
        // 如果相同則不進行導(dǎo)航
        return;
      }
      
      // 否則進行導(dǎo)航
      this.$router.push({ path: targetPath });
    }

到了這里，關(guān)于重復(fù)導(dǎo)航到當(dāng)前位置引起的。Vue Router 提供了一種機制，阻止重復(fù)導(dǎo)航到相同的路由路徑。的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！