Vue——路由回退至指定页面

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

先来引出一下遇到的问题：在做一个移动端支付页面，在付款页面点击支付按钮，支付失败时跳转至支付失败提示页面；支付成功时跳转至支付成功页面。在支付成功页面下，如果用户点击手机自带的“返回”键，就又会跳转至支付页面，这时，如果用户在不知情的情况下又点击了支付按钮，就会产生重复支付的情况。

我们的需求是，如果用户支付成功的话，点击手机自带“返回”键应该跳转至上上一级页面；如果用户支付失败的话，点击手机自带“返回”键跳转至上一级页面（也就是支付页面）。

要解决上述问题，我们先来介绍一下，Vue的路由跳转，主要有如下三种：

1.router.push()

想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
当点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)。

// 字符串
router.push('home')// 对象
router.push({ path: 'home' })// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效,记住path和params不能合用
router.push({ path: '/user', params: { userId }}) // -> /user

2.router.replace()

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

3.router.go()

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

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)// 后退一步记录，等同于 history.back()
router.go(-1)// 前进 3 步记录
router.go(3)// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)

通过上面的路由跳转方式，我们可以知道，产生文章开始时描述的问题的原因是：使用了router.push()方式，将每一次路由跳转的记录都保存下来了。对应的解决方式，自然就是判断当支付成功时，将路由跳转方式改为router.replace()，用支付成功页面直接将支付页面替换掉，这时用户点击“返回”键自然就不会返回支付页面了。

上面的一些文字和代码粘贴自Vue官网（https://router.vuejs.org/zh/guide/essentials/navigation.html#router-replace-location-oncomplete-onabort），官网还是值得仔细研究的。