VueRouter中的全局、独享与组件内路由守卫详解-优快云博客

本文链接：https://blog.youkuaiyun.com/lx00000025/article/details/132322231

一、全局路由守卫

作用全局

router.beforeEach全局前置路由守卫—初始化的时候被调用、每次路由切换之前被调用
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中，独享路由守卫是一种路由守卫函数，用于在进入或离开特定路由时执行额外的逻辑或验证。独享路由守卫只会应用于特定的路由，而不是全局的所有路由。

beforeEnter：在创建路由时，可以通过在路由配置中定义beforeEnter守卫函数来应用特定的前置逻辑
beforeRouteEnter：在进入特定路由之前执行，但在路由组件实例被创建之前执行。
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中，可以利用路由守卫函数来控制在组件内部导航发生前后执行的逻辑。组件内的路由守卫与全局路由守卫相比，更专注于组件级别的导航钩子。

beforeRouteEnter：在进入路由前被调用。在这个守卫内部，无法通过this访问组件实例，因为它在组件实例被创建之前调用。但是，可以通过回调函数来接收组件实例，并在回调函数中访问和操作组件。

export default {
  beforeRouteEnter (to, from, next) {
    next(vm => {
      // 通过 `vm` 访问组件实例
      vm.doSomething();
    });
  },
  
  methods: {
    doSomething () {
      // 处理业务逻辑
    }
  }
}

beforeRouteUpdate：在当前路由被复用但是参数发生变化时调用，例如，从user/1导航至user/2。可以在该守卫中对组件进行更新操作。
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>