vue：路由守卫

本文主要是介绍vue：路由守卫，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

路由守卫

1. 作用：对路由进行权限控制

   配置路由守卫应在暴露前配置

2. 分类：全局守卫、独享守卫、组件内守卫

首先先给需要鉴权的路由设置好meta配置项。

meta配置项：是vue-router中的一个对象，主要用于存储路由的元数据（meta data）信息。这些元数据信息可以是一些描述性的内容，比如页面的标题、关键词、描述等，也可以是一些业务相关的参数或标识，比如是否需要登录、权限等级等。

{
    name: 'zhuye',
    path: '/home',
    component: Home,
    children: [
        {
            name: 'xinwen',
            path: 'news',
            component: News,
            //isAuth是否需要身份验证，title设置网页标题
            meta: { isAuth: true, title:'新闻' }	
        },
           ]
        }
    ]
}

全局守卫

beforeEach是Vue Router中的一个钩子函数，用于在路由切换前执行一些操作。可以利用beforeEach钩子函数实现某些全局的路由拦截控制。

beforeEach接收3个参数： to：要跳转的目标路由对象，from：当前导航正要离开的路由，next：调用该方法后，表示进入下一个路由

//全局前置守卫：初始化时执行、每次路由切换前执行
router.beforeEach((to,from,next)=>{
	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
		if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则
			next() //放行
		}else{
			alert('暂无权限查看')
		}
	}else{
		next() //放行
	}
})

afterEach是Vue Router中的一个钩子函数，用于在路由完成跳转后执行一些操作。可以利用afterEach钩子函数实现某些全局的路由跳转后的处理

afterEach方法接收2个参数：to：成功跳转的目标路由对象。from：当前导航正要离开的路由

//全局后置守卫：初始化时执行、每次路由切换后执行
router.afterEach((to,from)=>{
	if(to.meta.title){ 
		document.title = to.meta.title //修改网页的title
	}else{
		document.title = 'vue_test'
	}
})

独享守卫

可以让某个路由及其所有子路由独享一个路由守卫。这个路由守卫与全局前置守卫beforeEach相似，但是只作用于该路由及其子路由。

beforeEnter(to,from,next){
	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
		if(localStorage.getItem('school') === 'atguigu'){
			next()
		}else{
			alert('暂无权限查看')
		}
	}else{
		next()
	}
}

组件内守卫

在组件内部使用Vue Router提供的路由守卫来控制组件的进入、离开、更新等操作。

//进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {
     ...     //里面的配置和前面差不多
},
//离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {
     ...
}

这篇关于vue：路由守卫的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！