vue路由跳轉(zhuǎn)router-link清除歷史記錄的三種方式(總結(jié))
路由跳轉(zhuǎn)router-link清除歷史記錄
1.在vue項(xiàng)目中說(shuō)起路由跳轉(zhuǎn)，我們最先想到的就是router-link標(biāo)簽以及this.$router.push函數(shù)。
router-link和this.\$router.push的實(shí)現(xiàn)原理是一樣的，在點(diǎn)擊router-link時(shí)，內(nèi)部調(diào)用的就是this.$router.push。
2.this.\$router.push這個(gè)方法會(huì)向 history 棧添加一個(gè)新的記錄，所以，當(dāng)用戶點(diǎn)擊瀏覽器后退按鈕時(shí)，則回到之前的 URL。
那在我們使用路由跳轉(zhuǎn)的時(shí)候如何去掉歷史記錄呢？
官方文檔提供了如下三種方式
1.使用router-link標(biāo)簽時(shí)去掉歷史記錄：加上replace屬性
<router-link to='/project_selection' replace class='btn_none' tag="a">項(xiàng)目列表</router-link>
2.使用this.\$router.push標(biāo)簽時(shí)去掉歷史記錄：加上replace屬性，默認(rèn)值為false
this.$router.push({path: '/project_selection',replace:true})3.使用this.\$router.replace標(biāo)簽時(shí)去掉歷史記錄
this.$router.replace({path: '/project_selection'})所有內(nèi)容源自于官網(wǎng)：vue路由核心插件
vue跳轉(zhuǎn)后不記錄歷史記錄
vue路由跳轉(zhuǎn)一般情況下是使用push，
?this.$router.push({
? ? ? ? ? ? ? ? path: "/testTeam/testTeam",
? ? ? ? ? ? ? });若是特殊需求，頁(yè)面跳轉(zhuǎn)后不記錄到歷史記錄中，將push改為replace即可
this.$router.replace({path: '/project_selection'})以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue實(shí)現(xiàn)菜單切換功能,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
這篇文章主要介紹了淺談VUE中演示v-for為什么要加key，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
Vuex數(shù)據(jù)持久化實(shí)現(xiàn)的思路與代碼
Vuex數(shù)據(jù)持久化可以很好的解決全局狀態(tài)管理,當(dāng)刷新后數(shù)據(jù)會(huì)消失,這是我們不愿意看到的。這篇文章主要給大家介紹了關(guān)于Vuex數(shù)據(jù)持久化實(shí)現(xiàn)的思路與代碼，需要的朋友可以參考下2021-05-05
作為使用Vue的開(kāi)發(fā)者，我們對(duì)Vue指令一定不陌生，諸如v-model、v-on、等，同時(shí)Vue也為開(kāi)發(fā)者提供了自定義指令的api，熟練的使用自定義指令可以極大的提高了我們編寫(xiě)代碼的效率，讓我們可以節(jié)省時(shí)間開(kāi)心的摸魚(yú)2023-04-04
這篇文章主要為大家詳細(xì)介紹了vue前端信息詳情頁(yè)模板梳理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
Vue組件實(shí)現(xiàn)數(shù)字滾動(dòng)抽獎(jiǎng)效果
這篇文章主要為大家詳細(xì)介紹了Vue組件實(shí)現(xiàn)數(shù)字滾動(dòng)抽獎(jiǎng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue子傳父關(guān)于.sync與$emit的實(shí)現(xiàn)
這篇文章主要介紹了vue子傳父關(guān)于.sync與$emit的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要介紹了vue+ESLint 配置保存 自動(dòng)格式化代碼的相關(guān)知識(shí)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03
使用vue-router切換組件時(shí)使組件不銷(xiāo)毀問(wèn)題
這篇文章主要介紹了使用vue-router切換組件時(shí)使組件不銷(xiāo)毀問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
使用 Vue 綁定單個(gè)或多個(gè) Class 名的實(shí)例代碼
這篇文章主要介紹了使用 Vue 綁定單個(gè)或多個(gè) Class 名的實(shí)例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2018-01-01