1、路由导航流程解析
路由导航开始 : 在当前路由调用beforeRouterLeave - > 调用beforeEach
在重用组件中 : 调用beforeRouteUpdate - > 调用beforeEnter
解析异步路由组件 : 在被激活的路由组件里调用beforeRouteEnter - > 调用beforeResolve
导航被确认 : 触发DOM更新
用创建好的实例调用beforeRouteEnter中传递给next的函数
2、路由守卫为:
全局守卫:beforeEach
后置守卫:afterEach
全局解析守卫:beforeResolve
路由独享守卫:beforeEnter
组内路由守卫:beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave
router.js
// 1.全局路由前置卫士, 在路由导航触发之后执行,异步解析,在守卫resolve之前,导航一直处于等待的过程 用的较多
router.beforeEach(function (to, from, next) {
if(to.path === '/home' || to.path === '/detail/1' || to.path === '/detail/2'){
next() // resolve状态为confirmed,进行路由跳转,如果不调用则不跳转
}else if(from.meta.isLogin){
next() // 确定用户名
}else {
next(false) // 不跳转路由
}
})
// 设置多个钩子函数
router.beforeEach(function (to, from, next) {
next(); // 上一个钩子函数必须要调用next() 此处才执行,类似于node中的next() 区别是nodejs中返回的是res.send()
})
// 2. 全局解析守卫router.beforeResolve(v 2.5+)
router.beforeResolve(function (to, from, next) {
next()
})
// 3. 全局后置守卫 用的较少
router.afterEach(function (to, from ) {
})