VUE导航守卫

全局守卫

每次路由跳转 都会被触发

router.beforeEach((to,  from,  next)  =>  {
//全局前置守卫,当一个导航触发时，全局前置守卫按照创建顺序调用
//  数据校验时，非常有用  if(to.fullPath  ===  '/home'){next('/login')}
console.log('before  Each') next();
})
router.beforeResolve((to,  from,  next)  =>  {
//全局解析守卫,2.5.0  新增,这和  router.beforeEach  类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用
console.log('before  Resolve') next();
})
router.afterEach((to,  from)  =>  {
//全局后置钩子console.log('after  each')
})

beforeEach 所有路由跳转前执行，next同意跳转 比如login执行2秒后跳转

routers.beforeEach((to,  from,  next)  =>  { console.log('beforeEach') console.log(to) if(to.path!='/login'){
next()
}else{
setTimeout(()=>{ next()
},2000)
}
})

routers.afterEach((to,  from)  =>  { console.log('afterEach')
})

路由独享的守卫
写在配置里
你可以在路由配置上直接定义beforEnter守卫

const  router  =  new  VueRouter({
routes:  [
{
path:  '/foo', component:  Foo,
//在进入这个路由之前调用
beforeEnter:  (to,  from,  next)  =>  {
// ...
}
}
]
})

组件内的守卫

最后，你可以在路由组件内直接定义以下路由导航守卫

const  Foo  =  {
template:  `...`,
beforeRouteEnter  (to,  from,  next)  {
//  在渲染该组件的对应路由被  confirm  前调用
//  不！能！获取组件实例  `this`
// 因为当守卫执行前，组件实例还没被创建
},
beforeRouteUpdate  (to,  from,  next)  {
// 在当前路由改变，但是该组件被复用时调用
//  举例来说，对于一个带有动态参数的路径  /foo/:id，在  /foo/1  和  /foo/2  之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
//  可以访问组件实例  `this`
},
beforeRouteLeave  (to,  from,  next)  {
// 导航离开该组件的对应路由时调用
//  可以访问组件实例  `this`
//  通常用来禁止用户在还未保存修改前突然离开。该导航可以通过  next(false)  来取消
}
}

1. 导航被触发。
2. 调用全局的 beforeEach 守卫。
3. 在重用的组件里调用 beforeRouteUpdate 守卫。
4. 在路由配置里调用 beforeEnter。
5. 在被激活的组件里调用 beforeRouteEnter。
6. 调用全局的 beforeResolve 守卫 (2.5+)。
7. 导航被确认。
8. 调用全局的 afterEach 钩子。
9. 触发 DOM 更新。

异步组件

路由懒加载 vue中配合webpack 非常简单

{
path:'/login',
component:()=>import('./components/Login')

}

详情参考vue-router