导航守卫
vue-router实例方法提供了守卫导航的方法,可以将我们的代码逻辑植入到路由导航过程中。主要分为全局、单个路由共享、组件级
全局
router.beforeEach()
- 作用:导航前置守卫 在路由跳转之前进行判断和拦截,一般用来做一些进入页面的限制,比如未登录不能进入某些页面
- 当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中。
- 参数
- to:Route对象,即将要进入的目标
- from:Route,当前要离开的路由
- next:function,一定要调用该方法来resolve这个钩子。
- 如果调用next()调用管道中的下一个钩子,如果全部钩子执行完毕,则导航的状态是comfirmed
- next(false),中断当前的导航,如果浏览器的url改变了比如用户手动或者是浏览器后端按钮,则url会重置到from路由对应的地址
- next(’/’)或者next({path:’/’})跳转到指定的/地址,就是不去to的地址,跳到新地址。
- next(error)
router.beforeEach((to, from,next) => {
if(to.path!='/login'){
next('/')
}else{
next()
}
})
router.beforeResolve()
- 作用:注册全局解析守卫,在2.5.0+可以使用,它和 router.beforeEach类似,区别是在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用。
- 参数
- to,即将要进入的目标
- from,当前要离开的路由
- next,一定要调用该方法来resolve这个钩子。
router.be