正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:
全局的,
单个路由独享的,
或者组件级的。
全局守卫
全局前置守卫 router.beforeEach
全局解析守卫router.beforeResolve
全局后置钩子router.afterEach
全局前置守卫
你可以使用 router.beforeEach 注册一个全局前置守卫:
const router = new VueRouter({
... })
router.beforeEach((to, from, next) => {
// ...
})
每个守卫方法接收三个参数:
to: Route: 即将要进入的目标路由对象
from: Route: 当前导航正要离开的路由
next: Function: 钩子函数,里面定义参数,确认下一步路由要做什么
next('/')
或者 next({ path: '/' })
: 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。你可以向 next 传递任意位置对象,next({name: 'home'})
。
一般应用在用户未能验证身份时重定向到 /login
:
router.