Vue 路由守卫 next()

next()

router.beforEach((to, from, next) => {
    // ...
})

每个路由方法接收 3 个参数

• to
• from
• next

在路由守卫中, 只有 next() 是放行, 其他的只要带参数都不是放行, 而是 中断当前导航, 执行新的导航

例如: next('/home')、next(to)、next({ to: 'home', replace: true })
replace 参数为是否在导航后留下历史记录, 设置 true 就相当于不能通过浏览器的后退按钮返回前一个路由

使用场景

使用动态添加路由 addRoute() 会遇到在 addRoute() 之后第一次访问被添加的路由会白屏

这是因为此时的 addRoute() 还没有执行结束, 因而找不到刚刚被添加的路由导致白屏, 因此需要重新访问一次路由

next({ ...to, replace: true })
// 此时就需要使用带参数的 next() 来确保 addRoute() 动态添加的路由已经被完全挂载