Vue项目中常见问题(60)用户登录后路由问题(路由独享守卫与组件内守卫)

目录

gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master

业务需求:

路由独享守卫

 只有从购物车界面shopcart才能跳转到交易页面(创建订单)trade

只有从交易页面(创建订单)trade页面才能跳转到支付页面pay 

组件内守卫

只有从支付页面pay才能跳转到支付成功页面paysuccess

---

gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master

大家根据上传历史进行查找你需要的代码

业务需求:

用户登录的时候,路由跳转还有一些地方不正常

比如:用户已经登录了我们不能直接去(paysucces)支付成功的页面

只有从购物车界面shopcart才能跳转到交易页面(创建订单)trade

只有从交易页面(创建订单)trade页面才能跳转到支付页面pay

只有从支付页面pay才能跳转到支付成功页面paysuccess

我们利用路由独享守卫解决这些问题

路由独享守卫

网址: 导航守卫 | Vue Router

 只有从购物车界面shopcart才能跳转到交易页面(创建订单)trade

在router/routes.js中:

找到交易页面trade:

 next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。

只有从交易页面(创建订单)trade页面才能跳转到支付页面pay 

在router/routes.js中:

找到交易页面pay:

 

组件内守卫

一般常用的是全局守卫和路由独享守卫,但是组件内守卫我们也要会,所以这里我们利用组件内守卫来解决问题

 

只有从支付页面pay才能跳转到支付成功页面paysuccess

在pages/Paysuccess/index.vue中:

 至此解决了上面的路由跳转问题