一、全局路由守衛

作用全局

1. router.beforeEach全局前置路由守衛—初始化的時候被調用、每次路由切換之前被調用
2. router.afterEach全局后置路由守衛—初始化的時候被調用、每次路由切換之后被調用

配置

// 該文件專門用于創建整個應用的路由器
import VueRouter from 'vue-router'
//引入組件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'//創建并暴露一個路由器
const router =  new VueRouter({routes:[{name:'guanyu',path:'/about',component:About,meta:{title:'關于'}},{name:'zhuye',path:'/home',component:Home,meta:{title:'主頁'},children:[{name:'xinwen',path:'news',component:News,meta:{isAuth:true,title:'新聞'}},{name:'xiaoxi',path:'message',component:Message,meta:{isAuth:true,title:'消息'},children:[{name:'xiangqing',path:'detail',component:Detail,meta:{isAuth:true,title:'詳情'},//props的第一種寫法，值為對象，該對象中的所有key-value都會以props的形式傳給Detail組件。// props:{a:1,b:'hello'}//props的第二種寫法，值為布爾值，若布爾值為真，就會把該路由組件收到的所有params參數，以props的形式傳給Detail組件。// props:true//props的第三種寫法，值為函數props($route){return {id:$route.query.id,title:$route.query.title,a:1,b:'hello'}}}]}]}]
})//全局前置路由守衛————初始化的時候被調用、每次路由切換之前被調用
router.beforeEach((to,from,next)=>{console.log('前置路由守衛',to,from)if(to.meta.isAuth){ //判斷是否需要鑒權if(localStorage.getItem('school')==='atguigu'){next()}else{alert('學校名不對，無權限查看！')}}else{next()}
})//全局后置路由守衛————初始化的時候被調用、每次路由切換之后被調用
router.afterEach((to,from)=>{console.log('后置路由守衛',to,from)document.title = to.meta.title || '硅谷系統'
})export default router

二、獨享路由守衛

在Vue Router中，獨享路由守衛是一種路由守衛函數，用于在進入或離開特定路由時執行額外的邏輯或驗證。獨享路由守衛只會應用于特定的路由，而不是全局的所有路由。

1. beforeEnter：在創建路由時，可以通過在路由配置中定義beforeEnter守衛函數來應用特定的前置邏輯
2. beforeRouteEnter：在進入特定路由之前執行，但在路由組件實例被創建之前執行。
3. beforeRouteLeave：在離開特定路由之前執行，用于執行一些離開前的清理邏輯或確認操作。

---

// 該文件專門用于創建整個應用的路由器
import VueRouter from 'vue-router'
//引入組件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'//創建并暴露一個路由器
const router =  new VueRouter({routes:[{name:'guanyu',path:'/about',component:About,meta:{title:'關于'}},{name:'zhuye',path:'/home',component:Home,meta:{title:'主頁'},children:[{name:'xinwen',path:'news',component:News,meta:{isAuth:true,title:'新聞'},beforeEnter: (to, from, next) => {console.log('獨享路由守衛',to,from)if(to.meta.isAuth){ //判斷是否需要鑒權if(localStorage.getItem('school')==='atguigu'){next()}else{alert('學校名不對，無權限查看！')}}else{next()}},beforeRouteEnter (to, from, next) {//通過回調函數處理進一步的邏輯next()},beforeRouteLeave (to, from, next) {// 執行清理邏輯// 確認操作或其他邏輯next();}},{name:'xiaoxi',path:'message',component:Message,meta:{isAuth:true,title:'消息'},children:[{name:'xiangqing',path:'detail',component:Detail,meta:{isAuth:true,title:'詳情'},//props的第三種寫法，值為函數props($route){return {id:$route.query.id,title:$route.query.title,a:1,b:'hello'}}}]}]}]
})
//全局后置路由守衛————初始化的時候被調用、每次路由切換之后被調用
router.afterEach((to,from)=>{console.log('后置路由守衛',to,from)document.title = to.meta.title || '硅谷系統'
})export default router

三、組件內路由守衛

在Vue中，可以利用路由守衛函數來控制在組件內部導航發生前后執行的邏輯。組件內的路由守衛與全局路由守衛相比，更專注于組件級別的導航鉤子。

1. beforeRouteEnter：在進入路由前被調用。在這個守衛內部，無法通過this訪問組件實例，因為它在組件實例被創建之前調用。但是，可以通過回調函數來接收組件實例，并在回調函數中訪問和操作組件。

   export default {beforeRouteEnter (to, from, next) {next(vm => {// 通過 `vm` 訪問組件實例vm.doSomething();});},methods: {doSomething () {// 處理業務邏輯}}
   }
   

2. beforeRouteUpdate：在當前路由被復用但是參數發生變化時調用，例如，從user/1導航至user/2。可以在該守衛中對組件進行更新操作。
3. beforeRouteLeave：在組件離開當前路由前調用。可以使用該守衛來執行離開前的邏輯操作，例如保存數據或彈出確認對話框等。

---

<template><h2>我是About的內容</h2>
</template><script>export default {name:'About',//通過路由規則，進入該組件時被調用beforeRouteEnter (to, from, next) {console.log('About--beforeRouteEnter',to,from)if(to.meta.isAuth){ //判斷是否需要鑒權if(localStorage.getItem('school')==='atguigu'){next()}else{alert('學校名不對，無權限查看！')}}else{next()}},//通過路由規則，離開該組件時被調用beforeRouteLeave (to, from, next) {console.log('About--beforeRouteLeave',to,from)next()}}
</script>