这篇博客介绍了在Vue项目中如何使用路由独享守卫和组件内守卫来控制特定页面的跳转。通过设置路由独享守卫，确保用户只能从购物车页面shopcart跳转到交易页面trade，从交易页面跳转到支付页面pay。同时，利用组件内守卫限制支付页面pay跳转到支付成功页面paysuccess。详细代码实现和配置可在gitee仓库中查看。
目录
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
我们利用路由独享守卫解决这些问题
路由独享守卫
只有从购物车界面shopcart才能跳转到交易页面(创建订单)trade
在router/routes.js中:
找到交易页面trade:
next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
只有从交易页面(创建订单)trade页面才能跳转到支付页面pay
在router/routes.js中:
找到交易页面pay:
组件内守卫
一般常用的是全局守卫和路由独享守卫,但是组件内守卫我们也要会,所以这里我们利用组件内守卫来解决问题
只有从支付页面pay才能跳转到支付成功页面paysuccess
在pages/Paysuccess/index.vue中:
至此解决了上面的路由跳转问题
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
