Vue的vue-router路由导航守卫及其解析
导航守卫
一、什么叫导航？
导航就是路由正在发生变化
二、导航守卫、路由守卫、路由的钩子函数
在路由发生变化时会自动触发的一些函数
三、守卫有哪些
一、全局守卫（通过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