Vue3-路由-导航守卫

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

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

声明全局导航守卫

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

// 在 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')