Vue Router如何根据当前URL动态跳转：同个导航链接实现多路由切换

• 首先beforeRouteEnter守卫触发时，目标组件实例还未完成初始化，此时无法访问this，你写的this.$route会直接返回undefined，判断逻辑完全失效。
• 其次该守卫仅在进入/edit_profile对应组件前会触发，当你已经处于/edit_profile页面时，点击同一路由的router-link默认不会触发路由跳转行为，自然也不会执行你写的守卫逻辑。

这里提供两种常用的实现方式，都在导航栏组件中修改即可，不需要动业务页面的代码：

方案1：替换为自定义点击事件（最稳妥） #

放弃原生router-link，改用普通元素绑定点击事件，动态判断跳转路径：

<!-- 导航栏模板部分 -->
<span @click="handleLinkClick" style="cursor: pointer;">
  <fa icon="user-cog" />
</span>

// 导航栏脚本部分
methods: {
  handleLinkClick() {
    if (this.$route.path === '/edit_profile') {
      // 当前在编辑资料页，点击跳转首页
      this.$router.push('/')
    } else {
      // 其他页面点击跳转编辑资料页
      this.$router.push('/edit_profile')
    }
  }
}

方案2：动态绑定router-link的to属性 #

如果要保留router-link的原生特性，可以给to属性绑定计算值：

<!-- 导航栏模板部分 -->
<router-link :to="targetRoutePath">
  <fa icon="user-cog" />
</router-link>

// 导航栏脚本部分
computed: {
  targetRoutePath() {
    return this.$route.path === '/edit_profile' ? '/' : '/edit_profile'
  }
}

如果使用Vue Router 4，重复跳转同一路由会抛出警告，可以在路由配置文件中加全局捕获消除：

// router/index.js 中创建router实例后添加
const originalPush = router.push
router.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

内容的提问来源于stack exchange，提问作者rahan