1.全局前置守卫
每次发生路由的导航跳转时,都会触发全局前置守卫。因此,在全局前置守卫中,程序员可以对每个路由进行
访问权限的控制
// 创建路由实例对象
const router = new VueRouter({})
// 调用路由实例对象的beforeEach 方法,即可声明“全局前置守卫”
// 每次发生路由导航跳转的时候,都会自动触发fn这个"回调函数”
router.be foreEach(fn)
守卫方法的 3 个形参
全局前置守卫的回调函数中接收 3 个形参,格式为:
// 创建路由实例对象
const router = new VueRouter({})
// 全局前置守卫
router.befooreEach((to,from,next)=>{
// to 是将要访问的路由信息对象
// from 是将要离开的路由信息对象
// next 是一个函数,调用next()表示放行,允许这次路由导航
})
控制后台主页的访问权限:
router.befooreEach((to, from, next) => {
if (to.path === /main) {
const token localStorage.getItem('token')
if (token) {
next() //访问的是后台主页,且有 token 值
} else {
next('/login') //访问的是后台主页,但是没有 token 值
}
}else {
next() //访问的不是后台主页,直接放行
}
})
to,from,next
to:表示要去的路由信息
from:表示从何处来的路由信息
next() 调用此函数表示允许通过
1、全局前置守卫 beforeEach((to,from,next)=>{}) 在router/index.js使用
2、全局后置钩子 afterEach((to,from)=>{}) 没有next 在
router/index.js中使用
3、路由独享守卫 beforeEnter(to,from,next){} 在router/routes.js 守卫单个路由
4、组件内的守卫 在组件内使用
beforeRouteEnter(to,from,next){} 组件实例创建之前调用 比beforeCreate还早 无法访问this
beforeRouteUpdate (){} 当动态路由发生改变时触发 手动
beforeRouteLeave(to,from,next){} 组件即将要离开时执行