Java登陸第四十天——Router路由守衛

路由守衛就是在切換頁面的期間，執行的函式。
	類似於Vue的鉤子函式
	類似於Setvlet的Filter(過濾器)

路由守衛

路由守衛，就是在路由切換期間執的函式。

由vue-router提供的兩個常見守衛(函式)：
全域性前置守衛beforeEach和全域性後置守衛afterEach

語法格式如下：

/*
全域性前置守衛beforeEach	路由切換前執行的函式
	to：目的路由物件
	from：當前路由物件
	next:是否放行函式。 next()放行 next('/URL')重定向
*/
router.beforeEach( (to, from, next)=>{} )

/*
全域性後置守衛beforeEach	路由切換後執行的函式
	to：目的路由物件
	from：當前路由物件
*/
router.afterEach( (to, from)=>{} )

路由守衛的特點：

1. 前置守衛的箭頭函式中，next是可選的。

   • 如果使用next，要確保next會執行。
   • next重定向，依舊會觸發路由前置守衛。

2. 前置守衛的箭頭函式中，可以允許有兩種返回值。

   • 布林型別，T為放行，F為不放行。
   • 一個路由地址。(等價於router.push（）)

3. 如果不使用next，就一定要使用返回值。反之亦然。

4. 前置守衛預設攔截路由切換。

5. 這兩個守衛由vue-router提供，router物件呼叫。

6. 路由守衛，在路由配置檔案中編寫。

栗子

testRouter.js

import {createRouter, createWebHashHistory} from 'vue-router'


import Left from '../components/left.vue'
import Right from '../components/right.vue'


const testRouter = createRouter({
    history: createWebHashHistory(),
    routes: [
        {path: '/left', component: Left},
        {path: '/right', component: Right}
    ]
});

testRouter.beforeEach( (to,from)=>{
    console.log("---觸發前置守衛---");
    console.log("目的路由："+to.path+"當前路由："+from.path);
    return true;
} )
testRouter.afterEach( (to, from) =>{
    console.log("---觸發後置守衛---");
    console.log("目的路由："+to.path+"當前路由："+from.path);
}  )

//預設匯出，在需要的地方匯入該配置檔案即可。
export default testRouter;

App.vue

<script setup>
import {useRouter} from 'vue-router'

let router = useRouter();

let right = () => {
  router.push('/right')
}
</script>

<template>
  <router-link to="/left">左</router-link>
  丨
  <button @click="right()">右</button>
  <router-view></router-view>
  <h3>APP尾部</h3>
</template>

<style scoped>
</style>

效果展示