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），官网还是值得仔细研究的。
