技術標籤：vuejs

1.什麼是路由守衛（導航守衛）?

導航守衛其實也是路由守衛，也可以是路由攔截，我們可以通過路由攔截，來判斷使用者是否登入，該頁面使用者是否有許可權瀏覽，需要結合meta來實現。
vue中路由守衛一共有三種，一個全域性路由守衛，一個是元件內路由守衛，一個是router獨享守衛。
所謂的路由守衛可以簡單的理解為一座房子的門口的保安，想要進入這個房子就必須通過保安的檢查，要告訴路由守衛你從哪裡來？總不能隨便陌生人就給放進去？要到哪裡去？然後保安再告訴你下一步該怎麼做？如果你的確是這個房子主人允許進入的人，那就讓你進入，否則就要打電話給房子主人，跟房主商量(登入註冊)，給你許可權。

2.全域性路由守衛

a.全域性前置守衛：beforeEach

	所謂全域性路由守衛，就是小區大門，整個小區就這一個大門，你想要進入其中任何一個房子，都需要經過這個大門的檢查
全域性路由守衛有個兩個：一個是全域性前置守衛，一個是全域性後置守衛

	router.beforeEach((to, from, next) => {
	    console.log(to) => // 到哪個頁面去？
	    console.log(from) => // 從哪個頁面來？
	    next() => // 一個回撥函式
	}
	router.afterEach（to，from） = {}
 

next()：回撥函式引數配置

	next(false): 中斷當前的導航。如果瀏覽器的 URL 改變了 (可能是使用者手動或者瀏覽器後退按鈕)，那麼 URL 地址會重置到 from 路由對應的地址。
next('/') 或者 next({ path: '/' }): 跳轉到一個不同的地址。當前的導航被中斷，然後進行一個新的導航。你可以向 next 傳遞任意位置物件，且允許設定諸如 replace: true、name: 'home' 之類的選項以及任何用在 router-link 的 to prop 或 router.push 中的選項。

B.全域性後置鉤子函式：afterEach

• 只有兩個引數，to：進入到哪個路由去，from：從哪個路由離。
• 如下，每次切換路由時，都會彈出alert，點選確定後，展示當前頁面。
• 全域性後置鉤子函式表屬離開路由觸發的,所以也沒有必要繼續next（）執行

	router.afterEach((to,from)=>{
	  alert("after each");
	})

路由獨享守衛

beforeEnter:(to,from,next)=>{}，用法與全域性守衛一致。只是，將其寫進其中一個路由物件中，只在這個路由下起作用。

	router.beforeEnter((to,from)=>{
		  alert("after each");
	})

元件內守衛

	// 跟methods: {}等同級別書寫，元件路由守衛是寫在每個單獨的vue檔案裡面的路由守衛
	beforeRouteEnter (to, from, next) {
	    // 注意，在路由進入之前，元件例項還未渲染，所以無法獲取this例項，只能通過vm來訪問元件例項
	    next(vm => {})
	}
	beforeRouteUpdate (to, from, next) {
	    // 同一頁面，重新整理不同資料時呼叫，
	}
	beforeRouteLeave (to, from, next) {
	    // 離開當前路由頁面時呼叫
	}