Vue.js最佳实践--VueRouter的beforeEnter与beforeRouteLeave冲突解决-CSDN博客

本文探讨了Vue Router中beforeRouteLeave守卫的使用场景及遇到的问题，特别是在未保存修改前离开页面的情况。通过对比beforeEnter与beforeRouteLeave的区别，最终采用重定向的方式解决了守卫被触发两次的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用Vue做应用管理系统，通常会在离开某个页面的时候，需要检测用户是否有修改，询问用户需要不需要保存之类的需求

这时候，在读VueRouter文档：组件内的守卫的时候，发现beforeRouteLeave，这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。这个不正是为我们这个需求量身定制的功能嘛！！！

Vue+VueRouter很赞，当初选他没错，哈哈哈！！！

可是在实际使用的时候发现，beforeRouteLeave这个守卫被触发了两次，为什么呢？

调查发现有的模块在跳转前，会有根据登录情况的判断进入的模块，例如配置路由时：

 path: '/home',
    name: 'home',
    beforeEnter(routeTo, routeFrom, next) {
      // If the user is already logged in
      if (store.getters['auth/loggedIn']) {
        next({ name: 'xx' })
      } else<span> {
        // Redirect to login instead
        next({ name: 'login' })
      }
    },

beforeEnter中进行了跳转，这样路由发生了两次变化，beforeRouteLeave被触发了两次，这是不是VueRouter的bug？

解决方案呢？再读文档，重定向，并且文中特意指出，注意导航守卫并没有应用在跳转路由上，而仅仅应用在其目标上。这不正是我期待的效果嘛！

于是，修改后的代码，这样组件内的beforeRouteLeave就不会被触发两次了

    path: '/home',
    name: 'home',
    redirect: to => {
      if (store.getters['auth/loggedIn']) {
        // Redirect to xx instead
        return '/xx'
      } else {
        // Redirect to login instead
        return '/login'
      }
    },