23. 导航守卫

1. 重难点

1. 理解导航守卫
2. 使用导航守卫实现以下功能

• 只有登陆了, 才能查看交易/支付/个人中心界面

• 只有没有登陆, 才能查看登陆界面

• 只有携带的skuNum以及sessionStorage中有skuInfo数据, 才能查看添加购物车成功的界面

• 只能从购物车界面, 才能跳转到交易界面

• 只能从交易界面, 才能跳转到支付界面

• 只有从支付界面, 才能跳转到支付成功的界面

2. 导航守卫

1) 导航守卫是什么?

1. 导航守卫是vue-router提供的下面2个方面的功能

• 监视路由跳转 -->回调函数
• 控制路由跳转

2. 应用

• 在跳转到界面前, 进行用户权限检查限制(如是否已登陆)
• 在界面离开前, 做收尾工作

2) 导航守卫分类

1. 全局守卫: 针对任意路由跳转

• 全局前置守卫
• 全局后置守卫

2. 路由独享的守卫

• 前置守卫

3. 组件守卫: 只针对当前组件的路由跳转

• 进入
• 更新
• 离开

3) 相关API

1. 全局前置守卫: 在准备跳转到某个路由组件之前 (在开发中用的比较多)

router.beforeEach((to, from, next) => {// before enter each route component
          
})

说明: ①. to: 目标route ②. from: 起始route ③. next: 函数 next(): 执行下一个守卫回调, 如果没有跳转到目标路由 next(false)/不执行: 跳转流程在当前处中断, 不会跳转到目标路由组件 next(path): 跳转到指定的另一个路由

2. 全局后置守卫: 在跳转到某个路由组件之后

3. 路由独享守卫

4. 组件守卫

// 在当前组件对象被创建前调用, 不能直接访问this(不是组件对象)
// 但可以通过next(component => {}), 在回调函数中访问组件对象
beforeRouteEnter (to, from, next) {
	next(component => {})
},
// 当前组件对象将要更新前调用, 可以访问this
beforeRouteUpdate (to, from, next) {

},
// 在当前组件离开前调用, 可以访问this
beforeRouteLeave (to, from, next) {
	next()
}

3. 使用导航守卫完成功能

1. 只有登陆了, 才能查看交易/支付/个人中心界面

2. 只有没有登陆, 才能查看登陆界面

3. 只有携带的skuNum以及sessionStorage中有skuInfo数据, 才能查看添加购物车成功的界面

4. 只能从购物车界面, 才能跳转到交易界面

5. 只能从交易界面, 才能跳转到支付界面

6. 只有从支付界面, 才能跳转到支付成功的界面