前言
《vue 基礎》系列是再次回爐 vue 記的筆記，除了官網那部分知識點外，還會加入自己的一些理解。（裡面會有部分和官網相同的文案，有經驗的同學擇感興趣的閱讀）
路由跳轉，這屬於路由參數獲取外，用的第一多的功能。下面示例 vue-router 中 4 種常見的跳轉用法。
普通跳轉
這是常用的用法，不做過多描述。
編程式：
replace 跳轉
一開始我不太理解 replace 有什麼用，但當我用到 element-ui 中的 breadcrumb 麵包屑功能時，注意到了其中
replace 屬性。replace: 在使用 to 進行路由跳轉時，啟用 replace 將不會向 history 添加新記錄
有什麼用？
我們都知道路由有 history 功能，每當點擊瀏覽器返回時，將回到之前訪問的頁面記錄。
假如頁面設計有 3 層（首頁、產品列表、產品詳情頁），當從 1 級頁面（首頁）跳轉到 2 級頁面（產品列表）後，我們點擊瀏覽器後退按鈕一切都正常；但當 2 級頁面跳轉到 3 級頁面（詳情頁）後，再返回 2 級頁面似乎也沒問題，但當你再次返回時，卻又回到了 3 級頁面（其實用戶想回到最初的 1 級頁面，雖然代碼上符合邏輯，但現在一定出錯了）
原先我遇到類似問題，都是在最後級頁面通過“寫死”的路由地址來解決這個 bug，但其實現在有更好的方式，那就是 replace 。
如下是模擬這 bug 的重現：
tab 從： 路由跳轉 –> 動態路由 –> 路由跳轉（清除 history） –> 參數傳遞
最後 瀏覽器返回 後，路由沒有切換到上次訪問的路由記錄，而是跳到再上次的記錄。
編程式：
重定向
重定向概念多數出現在服務器端，但路由中的重定向你一定也見過，雖然原理不同，但最終的“效果”類似。
最終你訪問 / 時，頁面地址會變成 /router ，並渲染 /router 對應的 component。
但需注意：瀏覽器並沒有收到類似 3xx 的重定向狀態碼。
“前進/後退” 跳轉
如下方式，可以在業務代碼中實現瀏覽器返回功能：
類似還有 router.back， router.forward，他們都是基於 window.history 相關 api 來實現的功能：
總結
展示比較基礎的路由跳轉功能示例。
值得一提的是中間 replace 功能，能解決我們多級頁面某些“不合預期”的需求。如果你熟悉 html5 的 pushState 相關知識點，那也很好理解“前進/後退”的跳轉。
關於我
一位“前端工程師”，樂於實踐，並分享前端開發經驗。
如果有問題或者想法，歡迎各位評論留言，願大家共同進步。
關注【前端雨爸】，查閱更多前端技術心得。
閱讀更多 前端雨爸 的文章
