一、全局路由守卫

作用全局

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>