接上一篇，我們一起學習了vue路由的基本使用以及動態路由、路由巢狀以及路由命名等知識，今天我們一起來學習記錄vue-router的鉤子函式實現路由守衛；

　　何為路由守衛？路由守衛有點類似於ajax的請求攔截器，就是請求傳送之前先給你攔截住做一些事情之後再去傳送請求，同樣這裡的路由守衛意思差不多；簡單理解為就是你在進路由之前，首先把你攔住，對你進行檢查；這是不是有點中學門口的保安？進來之前攔住，有學生證就進，沒有學生證就不讓進；當然，路由守衛不僅僅只是在你進入之前攔住你，還有其他的鉤子函式進行其他操作；

　　vue-router一共給我們提供了三大類鉤子函式來實現路由守衛：

　　　　1、全域性鉤子函式（beforeEach、afterEach)

　　　　2、路由獨享的鉤子函式（beforeEnter）

　　　　3、元件內鉤子函式（beforeRouterEnter、beforeRouterUpdate、beforeRouterLeave）

　　首先我們先來看一下全域性鉤子函式：

　　　　全域性鉤子函式：

　　　　beforeEach：

　　　　　　beforeEach一共接收三個引數，分別是to、from、next；to：即將進入的路由物件；from：正要離開的路由物件；next：路由的控制引數；

　　　　　　next一共有四種呼叫方式：

　　　　　　next()：一切正常呼叫這個方法進入下一個鉤子；

　　　　　　next(false)：取消路由導航，這時的url顯示的是正要離開的路由地址；

　　　　　　next('/login')：當前路由被終止，進入一個新的路由導航（路由地址可以自由指定）

　　　　　　next(error)：路由導航終止並且錯誤會被傳遞到router.onError()註冊過的回撥中；

　　　　我們一般是用全域性鉤子來控制權限，像什麼進頁面沒有登入就跳登入頁，需要使用者達到什麼級別才能訪問當前頁面都是屬於頁面許可權控制，都是可以通過beforeEach鉤子函式來實現：

　　main.js（全域性鉤子函式我們一般是在main.js中進行書寫）：

// 進入路由前方法勾子
router.beforeEach((to, from, next) => {
  console.log(to, '前置第一個引數')
  console.log(from, '前置第二個引數')
  console.log(next, '前置第三個引數')
  /
    to 目標路由
    from 源路由
    next 跳轉到下一個路由
  */
//這裡暫時用local、storange來簡單模擬驗證許可權
  if (window.localstorange.getItem("token")) {
    // 如果存在，則直接跳轉到對應路由
     next();
  } else {
    // 如果不存在，則跳轉到登入頁
    next('/login');
  }
});

　　　　AfterEach：

　　　　　　AfterEach和beforeEach一樣都是屬於全域性守衛鉤子，都是在main.js中進行呼叫；其中AfterEach比beforeEach少一個next引數；

　　　　　　to：即將要進入的路由物件；

　　　　　　from：正要離開的路由物件；

　　　　　　afterEach()我們一般用來重置頁面滾動條位置：

　　　　　　假如我們有一個頁面很長，滾動後其中的某個位置後跳轉，這時新的頁面的滾動條位置就會在上一個頁面停留的位置；這個時候我們就可以利用afterEach進行重置：

//全域性路由改變後鉤子
router.afterEach((to, from) => {
  //將滾動條恢復到最頂端
  window.scrollTo(0, 0);
})

　　路由獨享的鉤子函式：

　　　　beforeEneter：

　　　　　　路由獨享顧名思義就是指定的路由才有這些鉤子函式，通常這類路由獨享的鉤子函式我們是在路由配置檔案中進行配置，只能設定改變前的鉤子，不能設定改變後的鉤子

const router=new VueRouter({
    routes
});
const routes=[
    {
        path:'/page1',
        component:page1,
        children: [
            {
                path: "phone",
                component: phone
            },
            {
                path: "computer",
                component: computer
            },
        ],
//路由獨享的鉤子函式
        beforeEnter:(to,from,next)=>{
            console.log(to);
            console.log(from);
            next(false);
        }
    },

　　上述程式碼理解為只有進入/page1才會觸發beforeEnter這個鉤子，如果進入其他頁面，是不觸發的；

　　元件內的鉤子函式：

　　　　beforeRouteEnter(to,from,next)：

　　　　在路由進入前呼叫，因為此時的vue例項還沒有建立，所以beforeEnter是唯一一個不能使用this的鉤子函式；

　　　　  to:即將要進入的路由物件；

　　　　from：正要離開的路由物件；

　　　　next：路由控制引數

　　　　beforeRouteUpdate(to,from,next):

　　　　在路由發生修改的時候進行呼叫，比如我們上一篇文章講到的動態路由傳參，這種情況我們的beforeRouteUpdate也是會被呼叫的；

　　　　 to:即將要進入的路由物件；

　　　　 from：正要離開的路由物件；

　　　　 next：路由控制引數；

　　　　beforeRouteLeave(to,from,next):

　　　　在路由離開該元件時呼叫；

　　　　 to:即將要進入的路由物件；

　　　　 from：正要離開的路由物件；

　　　　 next：路由控制引數

注意：beforeRouteEnter因為觸發的時候vue例項還沒有建立，所以這個鉤子函式中不能使用this，而beforeRouteUpdate和beforeRouteLeave都是可以訪問到例項的，因為當這兩個函式觸發的時候例項都已經被建立了；

　　當呼叫元件內的鉤子函式的時候，我們通常是在元件內部進行呼叫，舉個例子：

<template>
    <div>
        <h1 id="h1">主頁</h1>
        <p>
            <router-link to="/page1/phone">手機</router-link>
            <router-link to="/page1/computer">電腦</router-link>
        </p>
        <router-view></router-view>
    </div>
</template>
<script>
    export default {
    //路由進入前呼叫
  beforeRouteEnter (to, from, next) {
    window.document.title  = "歡迎";
    next();
  },
    //路由修改時呼叫
  beforeRouteUpdate(to,from,next){

  },
   //路由離開時呼叫
  beforeRouteLeave(to,from,next){

  },
        data () {
            return {
                msg: "我是page1元件"
            }
        },
    }
</script>    

&n