前言

《vue 基礎》系列是(shi)再次回爐 vue 記(ji)的(de)筆(bi)記(ji)，除了官網那部(bu)分知(zhi)識點外，還會加入自己的(de)一(yi)些理解。（里面會有(you)部(bu)分和官網相同(tong)(tong)的(de)文(wen)案，有(you)經驗的(de)同(tong)(tong)學擇感興趣的(de)閱(yue)讀）

路由(you)跳轉，這屬于路由(you)參數獲取外，用的第(di)一多的功(gong)能。下面示例 vue-router 中 4 種常(chang)見的跳轉用法。

普通跳轉

這是常(chang)用的(de)用法，不做(zuo)過(guo)多描述。

聲明式：

編程式：

replace 跳轉

一開始我不太理解 replace 有什么用，但當我用到 element-ui 中的 breadcrumb 面包屑功能時，注意到了其中 replace 屬性。

replace: 在使用 to 進行路由跳轉時，啟用 replace 將不會向 history 添加新記錄

有什么用？

我們(men)都知道(dao)路由有 history 功(gong)能，每當(dang)點(dian)擊瀏覽(lan)器返回(hui)時，將(jiang)回(hui)到(dao)之(zhi)前訪問的頁面記錄(lu)。

假如頁面設計有 3 層（首頁、產品列表、產品詳情頁），當從 1 級頁面（首頁）跳轉到 2 級頁面（產品列表）后，我們點擊瀏覽器后退按鈕一切都正常；但當 2 級頁面跳轉到 3 級頁面（詳情頁）后，再返回 2 級頁面似乎也沒問題，但當你再次返回時，卻又回到了 3 級頁面（其實用戶想(xiang)回到最初的 1 級頁面，雖然(ran)代碼上(shang)符(fu)合邏輯，但(dan)現在(zai)一定出錯了）

原先我遇到類似問題，都是在最后級頁面通過“寫死”的路由地址來解決這個 bug，但其實現在有更好的方式，那就是 replace 。

如(ru)下是模擬這 bug 的重現(xian)：

tab 從(cong)： 路由跳轉 –> 動(dong)態路由 –> 路由跳轉（清除 history） –> 參數傳遞

最后 瀏覽器返回 后，路(lu)由(you)沒有切換到(dao)上次(ci)訪問的路(lu)由(you)記(ji)錄，而是跳到(dao)再上次(ci)的記(ji)錄。

聲明式：

編程式：

重定向

重定(ding)向概念多(duo)數出現在服務器端，但路由中的重定(ding)向你一定(ding)也見過，雖(sui)然(ran)原理不同，但最終的“效果”類似(si)。

最終你訪問 / 時，頁面地址會變成 /router ，并渲染 /router 對應的 component。

但(dan)需注意：瀏(liu)覽器并沒有收到類似 3xx 的重定向狀態碼。

“前進/后退” 跳轉

如下(xia)方(fang)式，可以在業務代碼中實現瀏覽器返(fan)回功能：

類似還有 router.back， router.forward，他們都(dou)是基于 window.history 相關(guan) api 來實(shi)現的功能：

總結

展示(shi)比(bi)較基礎的路由跳轉功(gong)能示(shi)例。

值得(de)一提的(de)(de)是中間 replace 功(gong)能(neng)，能(neng)解(jie)決我們多級(ji)頁(ye)面某(mou)些“不合預期”的(de)(de)需求。如(ru)果你熟悉 html5 的(de)(de) pushState 相關知識點，那也(ye)很好(hao)理解(jie)“前進/后退”的(de)(de)跳轉(zhuan)。

關于我

一(yi)位“前端工程師”，樂(le)于(yu)實踐，并分享前端開發經驗。

如(ru)果(guo)有問(wen)題或者(zhe)想法(fa)，歡迎各位評論留(liu)言，愿大家共同進步。

關注【前端(duan)雨爸(ba)】，查閱更多前端(duan)技術心(xin)得。