Web前端 | 您所在的位置:网站首页 › 设置前置条件 › Web前端 |
目录 前言 全局前置路由守卫 全局后置路由守卫 局部路由守卫之path守卫 局部路由守卫之component守卫 前言本文介绍Vue2最后的知识点,关于vue的路由守卫。也就是鉴权,不是所有的组件任何人都可以访问到的,需要权限,而根据权限显示路由组件就需要路由守卫。 (本文建立在上篇文章代码基础之上) 全局前置路由守卫全局前置路由守卫写在创建好router和暴露router之间 router.beforeEach(callback) callback函数可以是普通函数也可以是箭头函数 callback函数有三个参数 from:路由对象,表示从哪来,起点 to:路由对象,表示到哪去,终点 next:这是一个函数,调用后表示放行,可以继续往下走 router.beforeEach((to,from,next)=>{}) 该callback函数会在初始化时被调用执行一次,以后每一次在任意切换路由组件之前都会被调用 简单举例 因为需要给路由对象频繁的进行判断是否需要鉴权 所以可以通过给路由对象添加自定义属性,可以解决代码的冗余 给路由对象添加自定义属性需要在路由对象的meta中定义 通过以上代码可以简单的达到鉴权的功能,判断用户名从而决定是否放行显示路由组件 全局后置路由守卫与全局前置路由守卫相同,都写在创建路由器和暴露路由器之间 router.afterEach((to,from)=>{}) 两个参数,to和from,和全局前置守卫相同 区别点在与 全局前置路由守卫在初始化时会调用一次callback以及在切换路由组件之前会调用一次callback函数 全局后置路由守卫则是在初始化时会调用一次callback和在切换路由组件之后调用一次 局部路由守卫,针对单个组件进行鉴权 代码写在route路由对象中 beforeEnter(){} 没有callback函数 本身可以理解为函数 三个参数 to,from,next component守卫是针对路由组件的,只会对路由组件生效 代码写在路由组件中 进入路由组件之前执行: beforeRouteEnter(to,from,next){} 离开路由组件之前执行: beforeRouteLeave(to,from,next){} 在一条时间线上执行 beforeRouteEnter中的to和beforeRouteLeave中的from是指向一个对象 |
CopyRight 2018-2019 实验室设备网 版权所有 |