vue-router 路由守衛（全局守衛、路由獨享守衛、組件內守衛）

路由跳轉前做一些驗證，比如登錄驗證，是網站中的普遍需求。對此，vue-route 提供的beforeRouteUpdate可以方便地實現導航守衛（navigation-guards）。導航守衛（navigation-guards）

 一、全局前置守衛beforEach

守衛方法接收三個參數：
    to：即將要進入的目標路由對象
    from：當前導航正要離開的路由
    next：執行下一步

    /**
     * @param {to} 將要去的路由
     * @param {from} 出發的路由
     * @param {next} 執行下一步
     */
    router.beforeEach((to, from, next) => {
        document.title = to.meta.title || '賣座電影';
        if (to.meta.needLogin && !$store.state.isLogin) {
            next({
                path: '/login'
            })
        } else {
            next()
        }
    })

二、全局後置鉤子afterEach（少用）

全局後置鉤子與全局前置守衛類似，然而和守衛不同的是，這些鉤子不會接受 next 函數也不會改變導航本身

    router.afterEach((to, from) => {
      // ...
   })

三、路由獨享的守衛beforeEnter

使用方法與全局守衛相同

不同的是：全局守衛可以作用於全局，路由獨享守衛只作用於被設置守衛的路由

        //登錄模塊
        path: '/login',
        component: () => import('@/views/login'),
        beforeEnter: (to, from, next) => {
            if (to.meta.needLogin && !$store.state.isLogin) {
                next({
                    path: '/login'
                })
            } else {
                next()
            }
        }

四、組件內的守衛

（1）beforeRouteEnter

可以在路由組件內直接定義以下路由導航守衛：
    在渲染該組件的對應路由被 confirm 前調用
    不！能！獲取組件實例 this，因爲當守衛執行前，組件實例還沒被創建
    可以通過 next 獲取data中的數據

  data() {
    return {
      name: "Grayly"
    };
  },  
  beforeRouteEnter: (to, from, next) => {
    next(vm => {
      alert("hello" + vm.name);
    })
  },

（2）beforeRouteUpdate

這個方法是vue-router2.2版本加上的。因爲原來的版本中，如果一個在兩個子路由之間跳轉，是不觸發beforeRouteLeave的。這會導致某些重置操作，沒地方觸發。在之前，我們都是用watch 的。但是通過這個勾子，我們有了更好的方式。

  beforeRouteUpdate (to, from, next) {
    // 在當前路由改變，但是該組件被複用時調用
    // 舉例來說，對於一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
    // 由於會渲染同樣的 Foo 組件，因此組件實例會被複用。而這個鉤子就會在這個情況下被調用。
    // 可以訪問組件實例 `this`
  },

（3）beforeRouteLeave

這個離開守衛通常用來禁止用戶在還未保存修改前突然離開。該導航可以通過 next(false) 來取消。
可以訪問組件實例 this

  beforeRouteLeave: (to, from, next) => {
    if (confirm("你確定要離開嗎") == true) {
      next();
    } else {
      next(false);
    }
  },

返回上一級路由

      第一種：history.back();

      第二種：this.$router.go(-1);