Vue.js最佳實踐--VueRouter的beforeEnter與beforeRouteLeave沖突解決

用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'
      }
    },