vue路由里面的 router.push(),router.replace(),router.go()

        之前在项目中用push和go用的比较多,没怎么注意到replace的用法。之前还一直在想为什么vue没有一个像微信小程序路由里面的wx.redirectTo一样的路由方式,原来是自己没有注意到。

一、router.push()

        想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL

声明式: <router-link :to="...">

编程式:router.push(...)

二、router.replace()

        跟 router.push 很像,唯一的不同就是,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录

声明式: <router-link :to="..." replace>

编程式:router.replace(...)

三、router.go()

        这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步,类似window.history.go(n) 

        这次主要是在做下单那一块用push方法导致路由陷入了死循环,商品详情---push---下单页---push----支付页----push---订单列表页,订单列表页按返回会返回到支付页,再按支付页的返回键(返回写的push路由到订单列表页),这样整个流程就陷入了死循环,这绝对是不允许的。再次查看了vue的router文档,于是看到了replace方法,泪奔,为啥之前没注意到咧

        新的思路商品页---push---下单页-----replace----支付页-------replace------订单列表页,这样就不会陷入死循环了,也不会在支付订单后可以再退回到支付页和下单页了。

发布了45 篇原创文章 · 获赞 15 · 访问量 13万+

猜你喜欢

转载自blog.csdn.net/qq_39364032/article/details/85774636