路由守卫是Vue Router提供的一种机制,用于在导航过程中对路由进行控制和管理。通过使用路由守卫,你可以在路由切换前、切换后以及错误处理时执行相应的逻辑。
router.beforeEach() 进入之前触发
router.afterEach() 进入之后触发
每个守卫方法接收三个参数:
①to: Route: 即将要进入的目标路由对象(to是一个对象,是将要进入的路由对象,可以用to.path调用路由对象中的属性)
②from: Route: 当前导航正要离开的路由
③next: Function: 这是一个必须需要调用的方法,执行效果依赖 next 方法的调用参数。
{ path: '/', name: 'Home', component: () => import('../views/Home.vue'), meta: { isAuth: true, title:'主页' }, },
//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用 router.beforeEach((to, from, next) => { //如果路由需要跳转 if (to.meta.isAuth) { //判断 如果user本地存储是admin的时候,可以通过 if (localStorage.getItem('user') === 'admin') { next() //放行 } else { alert('您无权限查看!') } } else { // 否则,放行 next() } })
路由跳转之后执行的事件,可以用作跳转路由后更改网页名
{ path: '/', name: 'Home', component: () => import('../views/Home.vue'), meta: { isAuth: true, title:'主页' }, },
//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用 router.afterEach((to, from) => { document.title = to.meta.title || 'xxx系统主页' })
独享路由守卫只有前置没有后置
在路由独享守卫中,我们同样可以访问到即将要进入的路由对象 to,以及当前的路由对象 from。另外,还可以通过 next 函数控制路由的跳转行为。如果调用 next 函数并传入一个路由对象,则会跳转到该路由。如果不调用 next 函数,则当前路由不会发生变化
{ path: '/', name: 'Home', component: () => import('../views/Home.vue'), meta: { isAuth: true }, beforeEnter: (to, from, next) => { if (to.meta.isAuth) { //判断是否需要授权 if (localStorage.getItem('user') === 'admin') { next() //放行 } else { alert('您无权限查看!') } } else { next() //放行 } } },
在组件内的守卫中,我们同样可以访问到即将要进入的路由对象 to,以及当前的路由对象 from。另外,还可以通过 next 函数控制路由的跳转行为。如果调用 next 函数并传入一个路由对象,则会跳转到该路由。如果不调用 next 函数,则当前路由不会发生变化。
//通过路由规则,进入该组件时被调用 beforeRouteEnter(to,from,next) { if(toString.meta.isAuth){ if(localStorage.getTime('user')==='admin'){ next() }else{ alert('无权限查看!') } } else{ next() } }, //通过路由规则,离开该组件时被调用 beforeRouteLeave(to,from,next) { next() }
联系客服