一.全局守卫
全局的写在main.js里面执行
- router.beforeEach((to,from,next)=>{})
- 回调函数中的参数,to:进入到哪个路由去,from:从哪个路由离开,next:函数,决定是否展示你要看到的路由页面。
前置守卫
router.beforeEach((to,from,next)=>{
if(to.path == '/login'){
next();
}else{
alert('您还没有登录,请先登录');
next('/login');//自动跳转到登录页面
}
})
后置守卫
router.afterEach((to,from)=>{
alert("after each");
})
二、组件内守卫
<script>
export default {
//进入
//在路由改变之前
//在渲染该组件的对应路由被confirm前调用
//不能获取当前组件实例this,因为在守卫执行之前,实例还没有被创建
//但是你可以通过传一个回调函数给next来访问组件实例。
//在导航被确认的时候进行回调,并且把组件实例作为回调方法的参数
beforeRouteEnter:(to,from,next)=>{
//业务逻辑
},
</script>
```javascript
//离开
可以利用这个方法当用户离开某个页面的时候,提示用户保存信息
比如在写博客是点击其他页面时,会提示是否保存当前内容
beforeRouteLeave:(to,from,next)=>{
if(confirm("确定离开此页面吗?") == true){
next();
}else{
next(false);
}
}
}
//离开
路由更新的守卫
beforeRouteupdate:(to,from,next)=>{
}
三、路由独显守卫
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
路由钩子有那些
全局的
router.beforeEach
router.afterEach
独显的
beforeEnter
组件的
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave
顺序
进入路由守卫的顺序
beforeEach beforeEnter beforRouteEnter, afterEach
离开路由守卫的顺序
导航被触发(A–>B)
调用A组件内路由守卫beforeRouteLeave(to,from,next)
调用全局路由前置守卫router.beforeEach(to,from,next)
调用B路由独享守卫 beforeEnter(to,from.next)
解析异步路由组件B
调用B的组件内路由守卫beforeRouteEnter(to,from,next)
调用全局路由钩子router.afterEach(to,from)
渲染B组件DOM