做招商的网络营销推广,莆田网站建设优化,微信营销管理工具,中国大型网站目录 前言
全局前置路由守卫
全局后置路由守卫
局部路由守卫之path守卫
局部路由守卫之component守卫 前言 本文介绍Vue2最后的知识点#xff0c;关于vue的路由守卫。也就是鉴权#xff0c;不是所有的组件任何人都可以访问到的#xff0c;需要权限#xff0c;而根据权限…目录 前言
全局前置路由守卫
全局后置路由守卫
局部路由守卫之path守卫
局部路由守卫之component守卫 前言 本文介绍Vue2最后的知识点关于vue的路由守卫。也就是鉴权不是所有的组件任何人都可以访问到的需要权限而根据权限显示路由组件就需要路由守卫。 本文建立在上篇文章代码基础之上 全局前置路由守卫 全局前置路由守卫写在创建好router和暴露router之间 router.beforeEach(callback) callback函数可以是普通函数也可以是箭头函数 callback函数有三个参数 from路由对象表示从哪来,起点 to:路由对象表示到哪去终点 next:这是一个函数调用后表示放行可以继续往下走 router.beforeEach((to,from,next){}) 该callback函数会在初始化时被调用执行一次以后每一次在任意切换路由组件之前都会被调用 简单举例 router.beforeEach((to,from,next){let user zzzif(to.meta.isAuth) {if(useradmin) {next()}else {alert(你没有权限)}}else {next()}
}) 因为需要给路由对象频繁的进行判断是否需要鉴权 所以可以通过给路由对象添加自定义属性可以解决代码的冗余 给路由对象添加自定义属性需要在路由对象的meta中定义 通过以上代码可以简单的达到鉴权的功能判断用户名从而决定是否放行显示路由组件 全局后置路由守卫 全局后置路由守卫与全局前置路由守卫相同都写在创建路由器和暴露路由器之间 router.afterEach((to,from){}) 两个参数to和from和全局前置守卫相同 区别点在与 全局前置路由守卫在初始化时会调用一次callback以及在切换路由组件之前会调用一次callback函数 全局后置路由守卫则是在初始化时会调用一次callback和在切换路由组件之后调用一次 // 全局后置守卫
router.afterEach((to,from){console.log(to);console.log(from);
}) 局部路由守卫之path守卫 局部路由守卫针对单个组件进行鉴权 代码写在route路由对象中 beforeEnter(){} 没有callback函数 本身可以理解为函数 三个参数 to,from,next beforeEnter(to,from,next){let user adminif(useradmin) {next()}else {alert(你没有权限)}} 局部路由守卫之component守卫 component守卫是针对路由组件的只会对路由组件生效 代码写在路由组件中 进入路由组件之前执行 beforeRouteEnter(to,from,next){} 离开路由组件之前执行 beforeRouteLeave(to,from,next){} beforeRouteEnter(to,from,next){console.log(to);next()},beforeRouteLeave(to,from,next){console.log(from);next()} 在一条时间线上执行 beforeRouteEnter中的to和beforeRouteLeave中的from是指向一个对象
