vue導航守衛詳解

概念

導航守衛又稱路由守衛，實時監控路由跳轉時的過程，在路由跳轉的各個過程執行相應的操作，類似於生命週期函數，在開發過程中經常被使用，比如用戶點擊一個頁面，如果未登錄就調到登錄頁面，已登錄就讓用戶正常進入。

分類

全局路由一共分爲三類：全局守衛，路由獨享的守衛，組件內的守衛。

一、全局守衛

全局守衛有三種：
    1.router.beforeEach（全局前置守衛）
    2.router.beforeResolve（全局解析守衛）
    3.router.afterEach（全局後置守衛）

1.router.beforeEach（全局前置守衛）

以一個簡單的例子來解釋router.beforeEach
假設我們現在做一個這樣的需求，用戶在未登錄的時候進入任意頁面，我們就讓用戶跳轉到登錄頁面，在已登錄的時候讓用戶正常跳
轉到點擊的頁面。

準備好三個組件：home.vue,login.vue,about.vue

home.vue的內容：
<template>
  <div class="hello">
    <button @click="$router.push('/about')">去關於頁面</button>
  </div>
</template>
<script>
  export default {
    name: 'home',
    data() {
      return {}
    }
  }
</script>
<style scoped>
</style>

login.vue的內容：
<template>
    <div>登錄頁面</div>
</template>
<script>
    export default {
        name: "about"
    }
</script>
<style scoped>
</style>

about.vue的內容：
<template>
    <div>關於頁面</div>
</template>
<script>
    export default {
        name: "about"
    }
</script>
<style scoped>
</style>

router配置文件內容：

import Vue from 'vue'
import Router from 'vue-router'
import home from '@/components/home'
import login from '@/components/login'
import about from '@/components/about'

Vue.use(Router)
const ISLOGIN = true   //登錄狀態模擬
const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: home,
    },
    {
      path: '/login',
      name: 'login',
      component: login
    },
    {
      path: '/about',
      name: 'about',
      component: about
    }
  ]
})

router.beforeEach((to, from, next) => {   //全局全局前置守衛
  //to : 將要進入的目標路由對象
  //from : 即將離開的目標路由對象
  //執行跳轉的下一步鉤子
  console.log(to)
  console.log(from)
  if(to.name != 'login'){ //如果不是登錄頁面
    if(ISLOGIN)next()   //已登錄就執行跳轉
    else next({name:'login'})   //否則跳轉到登錄頁面
  }else{ //如果是登錄頁面
    if(ISLOGIN)next({name:'/'}) //已登錄就跳轉到首頁
    else  next()  //否則正常進入登錄頁面
  }
})
export default router

我們可以看到，每次路由跳轉，router.beforeEach都會執行，並且接受三個參數，to記錄着將要進入的目標路由對象的詳細，from記錄着即將離開的目標路由對象的信息，next()表示執行下一步，router.beforeEach就是全局路由跳轉時觸發執行的函數。

2.router.beforeResolve(全局解析守衛)

和全局前置守衛類似，區別是在跳轉被確認之前，同時在所有組件內守衛和異步路由組件都被解析之後，解析守衛才調用。

3.router.afterEach(全局後置鉤子)

只接受to和from,不會接受 next 函數也不會改變導航本身

二、路由獨享守衛

獨享守衛只有一種:beforeEnter。
該守衛接收的參數與全局守衛是一樣的，但是該守衛只在其他路由跳轉至配置有beforeEnter路由表信息時才生效。
router配置文件內容：

{
   path: '/about',
   name: 'about',
   component: about,
   beforeEnter:(to,from,next)=>{
      console.log(to);
      console.log(from);
      next()
   }

三、組件內守衛

組件內守衛一共有三個：
    beforeRouteEnter，
    beforeRouteUpdate，
    beforeRouteLeave
三者分別對應：進入該路由時執行，該路由中參數改變時執行，離開該路由時執行。

<template>
  <div>關於頁面</div>
</template>
<script>
  export default {
    name: "about",
    beforeRouteEnter(to, from, next) {
      //進入該路由時執行
    },
    beforeRouteUpdate(to, from, next) {
      //該路由參數更新時執行
    },
    beforeRouteLeave(to, from, next) {
      //離開該路由時執行
    }
  }
</script>
<style scoped>
</style>