vue-router中的勾點函數和執行順序說明

router.beforeEach((to, from, next) => {
    if (to.meta.requireAuth) {
        //判斷該路由是否需要登入許可權
        if (cookies('token')) {
            //通過封裝好的cookies讀取token，如果存在，name接下一步如果不存在，那跳轉回登入頁
            next()//不要在next裡面加"path:/",會陷入死迴圈
        }
        else {
            next({
                path: '/login',
                query: {redirect: to.fullPath}//將跳轉的路由path作為引數，登入成功後跳轉到該路由
            })
        }
    }
    else {
        next()
    }
})

//使用勾點函數對路由進行許可權跳轉
router.beforeEach((to, from, next) => {
    const role = localStorage.getItem('ms_username');
    if(!role && to.path !== '/login'){
        next('/login');
    }else if(to.meta.permission){
        // 如果是管理員許可權則可進入，這裡只是簡單的模擬管理員許可權而已
        role === 'admin' ? next() : next('/403');
    }else{
        // 簡單的判斷IE10及以下不進入富文字編輯器，該元件不相容
        if(navigator.userAgent.indexOf('MSIE') > -1 && to.path === '/editor'){
            Vue.prototype.$alert('vue-quill-editor元件不相容IE10及以下瀏覽器，請使用更高版本的瀏覽器檢視', '瀏覽器不相容通知', {
                confirmButtonText: '確定'
            });
        }else{
            next();
        }
    }
})

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染該元件的對應路由被 confirm 前呼叫
    // 不！能！獲取元件範例 `this`
    // 因為當勾點執行前，元件範例還沒被建立
  },
  beforeRouteUpdate (to, from, next) {
    // 在當前路由改變，但是該元件被複用時呼叫
    // 舉例來說，對於一個帶有動態引數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
    // 由於會渲染同樣的 Foo 元件，因此元件範例會被複用。而這個勾點就會在這個情況下被呼叫。
    // 可以存取元件範例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 導航離開該元件的對應路由時呼叫
    // 可以存取元件範例 `this`
  }

beforeRouteLeave (to, from, next) {
  window.clearInterval(this.timer) //清楚定時器
  next()
}

 beforeRouteLeave (to, from, next) {
 //判斷是否彈出框的狀態和儲存資訊與否
 if (this.dialogVisibility === true) {
    this.dialogVisibility = false //關閉彈出框
    next(false) //回到當前頁面, 阻止頁面跳轉
  }else if(this.saveMessage === false) {
    alert('請儲存資訊後退出!') //彈出警告
    next(false) //回到當前頁面, 阻止頁面跳轉
  }else {
    next() //否則允許跳轉
  }

 beforeRouteLeave (to, from, next) {
    localStorage.setItem(name, content); //儲存到localStorage中
    next()
}