先來引出一下遇到的問題：在做一個移動端支付頁面，在付款頁面點擊支付按鈕，支付失敗時跳轉至支付失敗提示頁面；支付成功時跳轉至支付成功頁面。在支付成功頁面下，如果用戶點擊手機自帶的“返回”鍵，就又會跳轉至支付頁面，這時，如果用戶在不知情的情況下又點擊了支付按鈕，就會產生重復支付的情況。
我們的需求是，如果用戶支付成功的話，點擊手機自帶“返回”鍵應該跳轉至上上一級頁面；如果用戶支付失敗的話，點擊手機自帶“返回”鍵跳轉至上一級頁面（也就是支付頁面）。
要解決上述問題，我們先來介紹一下，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），官網還是值得仔細研究的。