路由守卫
vue-router 提供的路由守卫主要用来通过跳转或取消的方式守卫路由,比如符合什么条件才可以进入路由,否则取消跳转,或者控制跳转路径,路由跳转成功过后需要做什么操作等等都可以使用路由守卫(路由钩子)实现,常用来做登录验证
路由守卫分类
全局守卫(全局前置守卫,全局解析守卫,全局后置钩子)
路由独享守卫
组件守卫
全局前置守卫
全局的守卫定义在main.js中
使用 router.beforeEach 注册一个全局前置守卫:
const router = new VueRouter({
... })
router.beforeEach((to, from, next) => {
// ...
})
方法接收三个参数:
- to: 即将要进入的目标 路由对象
- from: 当前导航正要离开的路由 路由对象
- next : Function:确保要调用 next(),否则钩子就不会被 resolved