vue 路由守衛介紹

1.全局前置守衛

router.beforeEach 在每次進入頁面和頁面刷新時都要經過該守衛判斷
使用：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from '../views/Index.vue'
import {routerList} from '../router/RouterList.js'
Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes:routerList
})

router.beforeEach((to,from,next)=>{
        if(to.path == '/page-1'){
            next({path:'/page-3'})
        }else{
            next()
        }     
})


export default router

參數值：to from next

1. to: Route: 即將要進入的目標 路由對象
2. from: Route: 當前導航正要離開的路由
3. next: Function: 一定要調用該方法來 resolve 這個鉤子(如果沒有調用頁面進程會反覆調用)
   使用:next(’/’) 或者 next({ path: ‘/’ }): 跳轉到一個不同的地址。當前的導航被中斷，然後進行一個新 的導航。你可以向 next 傳遞任意位置對象，且允許設置諸如 replace: true、name: ‘home’ 之類的選項以及任何用在 router-link 的 to prop 或 router.push 中的選項。

2.全局解析守衛

router.beforeResolve和 router.beforeEach 類似，區別是在導航被確認之前，同時在所有組件內守衛和異步路由組件被解析之後，解析守衛就被調用
使用:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from '../views/Index.vue'
import {routerList} from '../router/RouterList.js'
Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes:routerList
})

router.beforeRouteLeave((to,from,next)=>{
        if(to.path == '/page-1'){
            next({path:'/page-3'})
        }else{
            next()
        }     
})


export default router

3.全局後置鉤子

router.afterEach 頁面進入之後執行 不會接受 next 函數也不會改變導航本身
使用：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from '../views/Index.vue'
import {routerList} from '../router/RouterList.js'
Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes:routerList
})

router.afterEach((to,form)=>{
      console.log(to)  
})


export default router

參數：to from

1. to: Route: 即將要進入的目標 路由對象
2. from: Route: 當前導航正要離開的路由

4.路由獨享的守衛

beforeEnter你可以在路由配置上直接定義 beforeEnter 守衛
使用：

    {
        path: '/',
        redirect: '/page-1',
        name: 'index',
        component: () =>  import ('../views/Index.vue'),  
        children: [
             {
                path: '/page-1',
                name: 'Page-1',
                component: () =>import ('../views/page1/page-1.vue'),
                beforeEnter: (to, from, next) => {
                     console.log(to)
                     next()
                }                   
            },
            {
                path: '/page-2',
                name: 'Page-2',
                component: () =>
                    import ('../views/page2/page-2.vue')
            },
   ]

參數： to from next 這些守衛與全局前置守衛的方法參數是一樣的(必須調用next())

5.組件內的守衛

beforeRouteEnter：在渲染該組件的對應路由被 confirm 前調用 ，不能！獲取組件實例 this 因爲
當守衛執行前,組件實例還沒被創建
beforeRouteUpdate： (2.2 新增)在當前路由改變，但是該組件被複用時調用舉例來說，對於一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳
由於會渲染同樣的 Foo 組件，因此組件實例會被複用。而這個鉤子就會在這個情況下被調用。轉的時候，
可以訪問組件實例 this
beforeRouteLeave：導航離開該組件的對應路由時調用 可以訪問組件實例 this
使用：

<template>
  <div>page2</div>
</template>

<script>
// eslint-disable-next-line @typescript-eslint/no-this-alias

export default {
    data() {
        return {
            
        }
    },
  beforeRouteEnter(to, from, next) {
    // ...
    console.log(to);
    next();
  },
  beforeRouteLeave(to, from, next) {
    console.log(to);
    next();
  },
  // eslint-disable-next-line @typescript-eslint/no-empty-function
  beforeRouteUpdate(to, from, next) {
    console.log(to);
    next();
  }
};
</script>

<style lang="less" scoped>
</style>