基础知识
路由守卫:
- 有些资料上叫路由拦截
- 或者路由的钩子(函数)
- 当我进到到哪个阶段的时候会自动触发
举个例子
路由的守卫就相当于看门的老大爷,你进出都要检查,符合了要求才能进出
路由的三大守卫
全局守卫:
beforeEach: 全局前置守卫
afterEach: 全局后置守卫
beforeResolve:全局解析守卫。
组件内部守卫:
beforeRouteEnter: 进入路由之前执行
beforeRouteUpdate:当路由的参数发生改变时执行
beforeRouteLeave: 离开路由之前执行。
路由独享守卫:
beforeEnter 进入路由之前执行。写在路由配置信息上的。
初始代码
- 以下路由守卫都会按照这个代码进行编辑
初始代码:
/******************组件(我要点击后进入的页面) My.vue************************/
<template>
<div>大叫好,这里是页面 my</div>
</template>
<script>
export default {
name:"My",
}
</script>
/******************路由(对应的地址进入到对应的页面)index.js*****************/
{
path:"/my",
name:"my",
component:()=>import('../views/my')
},
/******************App.vue*****************/
<router-link to="/my">my</router-link> |
此时效果是这样的:
1. beforeRouteEnter: 进入路由之前执行
- 进入之前进行拦截
- 没有 this
- to 进入的路由,你要进入到的哪个路由里面
- from 从哪个路由过来
- next 决定着你的走向(允不允许跳转到该路由或往下走)
- 你如果打印 to 和 from 就会展现你的路由信息
下面我们开始添加路由守卫 beforeRouteEnter 进入路由之前执行
/******************在 my.vue里面添加************************/
<script>
export default {
name:"my",
beforeRouteEnter(to,from,next){
//next();
}
}
</script>
- 此时就进不去那个 my 界面了
- 但是如果你写上 next() 就会允许你进入,当然,之前会有检查你是否符合标准的代码,这里我没写,这部分代码主要是:判断是否符合,符合直接进入,不符合的话跳转到哪些页面,至于跳转的话,也用 next(),只要在里面写入你 路由 的地址就可以了
2. beforeRouteLeave:离开路由之前执行
- 离开之前进行拦截
- to 要去哪
- from 从哪里开
- next() 是没有回调函数的
- 这里面有 this 的,这个 this 指的是当前你所在的实例
- 该路由的信息未填写完整,或该路由的流程未走完,你是离不开这个页面的。(关闭浏览器不算数)
/******************在 my.vue里面添加************************/
<script>
export default {
name:"my",
beforeRouteLeave(to,from,next){
//next();
}
}
</script>
- 现在当你进入到 my ,然后离开的时候就离不开了,因为我把它拦下来了
- 怎让离开? 只要协商 next();就可以了,是继续执行的意思
3. beforeRouteUpdate:当路由的参数发生改变时执行
- 当路由的参数发生变化时触发
- 就是你浏览器上头的地址栏
- to:要更改的路由
- from:当前路由
/******************在 my.vue里面添加************************/
//template
<router-link to="/my?id=4">Home</router-link> |
---------------------------------------------------------------------------
//script
<script>
export default {
name:"my",
beforeRouteUpdate(to,from,next){
//next();
}
}
</script>
- 现在我的地址栏内的参数时?a=2
- 上图我给 template 添加链接是让它自己访问自己并给自己一个值,这样就相当于变的改变了自己路由的参数,但是! 我点击它并没有像我预想的那样改变了路由的参数
- 这是因为我的 beforeRouteUpdate 将它拦截了下来