导航守卫
一、什么叫导航?
导航就是路由正在发生变化
二、导航守卫、路由守卫、路由的钩子函数
在路由发生变化时会自动触发的一些函数
三、守卫有哪些
一、全局守卫(通过new VueRouter()生成的这个实例对象去使用)
1.全局前置守卫 beforeEach
router.beforeEach((to, from, next) => {
})
2.全局后置守卫 afterEach
router.afterEach((to, from) => {
//afterEach 是在导航已经完成了触发,这时有next也没用
})
3.全局解析守卫 beforeResolve (没有太大的作用)
router.beforeResolve((to, from, next) => {
})
二、路由独享
1. beforeEnter(路由规则中的一个配置项)
new VueRouter({
routes: [
{
path: "/hello",
component: hello,
beforEnter: (to, from, next) => {
}
}
]
})
三、路由组件中(在组件的配置选项中定义的,也就是与那个data、props一起的那个)
1.beforeRouteLeave
2.beforeRouteUpdate
3.beforeRouteEnter
{
data(){
return {
name: "张三"
}
},
beforeRouteLeave(to, from, next){
},
beforeRouteUpdate(to, from, next){
},
beforeRouteEnter(to, from, next){
}
}
四、to、from、next
一、to 代表着将要去的路由的信息对象
二、from 从from要去to 当前导航正要离开的路由
三、next 是一个函数,必须要调用
1.next() 进入下一个
2.next("/") next({path:’/list’}) 重定向到某个路由。
五、详细介绍
- beforeEach
- 全局前置
- afterEach
- 全局后置
- beforeEnter
- 路由独享
- 当进入这个路由的时候,这个函数会触发,触发时机在beforeEach之后,在beforeRouteEnter之前
- beforeRouteEnter
1.组件内配置的。触发在beforeEnter之后 - beforeRouteUpdate
- 在动态路由的时候,参数发生变化时,触发
- beforeRouteLeave
- 当离开时第一个触发,在beforeEach之前
六、思考如下的导航,导航守卫触发的顺序
一、 /home -> /list
1. /home组件中的 beforeRouteLeave -> beforeEach
2. /list 的配置中触发 beforeEnter -> /list组件中的 beforeRouteEnter -> afterEach
二、/detail/1 -> /detail/2
1. 全局前置beforeEach
2. detail组件中的beforeRouteUpdate
3. 全局后置 afterEach
七、需求1:任何页面跳转时,发生导航时,需要在页面上出现滚动条显示
- 在全局前置的beforeEach中让进度条开始滚动
- 在全局后置的afterEach中让进度条完成
八、需求2:离开个人中心页面时需要二次确认
- 在个人中心页面的 beforeRouteLeave 中处理即可
九、需求3:必须要有登陆状态才能进入个人中心页面,身份认证
方案一、
对个人中心页面配置路由独享守卫beforeEnter,在里面判断是否有登陆
方案二、
给需要身份认证的页面配置路由元信息(meta),然后再全局前置守卫中,处理即可。beforeEach中处理即可。
meta 元信息是给某个路由配置一些额外的信息。
需求增加:登陆成功之后,浏览器后退不要进入登陆页面。
在登陆成功跳转的时候,不要使用push,使用replace实现就行。
需求再增加:登陆成功之后要跳转回之前想要去的页面
- 在身份验证不通过,打回到登陆页面时,将当前的地址携带在url地址上,通过?号传递过去
- 登陆页面登陆成功之后,通过url地址获取到之前要去的页面地址,然后跳转即可。
?推荐使用to.fullPath 而不是 to.path 好在哪里?- 比如我们去/my的时候,url路由携带有?号的参数。 /my?type=1&hello=2
- 这时使用to.path 只能得到/my
- 而使用to.fullPath 能得到完整的/my?type=1&hello=2