Vue3-路由-导航守卫

9次阅读
没有评论

共计 502 个字符,预计需要花费 2 分钟才能阅读完成。

导航守卫可以控制路由的访问权限
Vue3-路由-导航守卫

声明全局导航守卫

全局导航守卫会拦截每个路由规则,从而对每个路由进行访问权限的控制:

// 在 router.js 中
// 创建路由实例对象
const router = creteRouter({ ... })

// 调用路由实例对象的 beforeEach 函数,声明 “全局前置守卫”
// fn 必须是一个函数,每次拦截到的路由请求,都会调用 fn 进行处理
// 因此 fn 叫做 “守卫方法”
router.beforeEach(fn)

守卫方法的 3 个形参

// 创建路由实例对象
const router = creteRouter({ ... })

// 全局前置守卫
router.beforeEach((to, from, next) => {
    // to 目标路由对象
    // from 当前导航正要离开的路由对象
    // next 是一个函数,表示放行
})

在守卫方法中如果不声明 next 形参,则默认允许用户访问每一个路由

在守卫方法中如果声明了 next 形参,则必须调用 next() 函数,否则不允许用户访问任何一个路由

next() 函数三种调用方法

  1. 直接放行:next()
  2. 强制其停留在当前页面:next(false)
  3. 强制用户跳转到登录页面:next('/login')

正文完
 0
qiaofugui.cn
版权声明:本站原创文章,由 qiaofugui.cn 于2024-05-21发表,共计502字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
验证码