vue路由跳轉(zhuǎn)router-link清除歷史記錄的三種方式(總結(jié))
路由跳轉(zhuǎn)router-link清除歷史記錄
1.在vue項(xiàng)目中說起路由跳轉(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",
? ? ? ? ? ? ? });若是特殊需求，頁面跳轉(zhuǎn)后不記錄到歷史記錄中，將push改為replace即可
this.$router.replace({path: '/project_selection'})以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
springboot?vue接口測(cè)試前端模塊樹和接口列表
這篇文章主要為大家介紹了springboot?vue接口測(cè)試前端模塊樹和接口列表，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-05-05
vue中computed下使用箭頭函數(shù)會(huì)報(bào)錯(cuò)問題及解決
這篇文章主要介紹了vue中computed下使用箭頭函數(shù)會(huì)報(bào)錯(cuò)問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
TagsInput 是一種可編輯的輸入框，通過回車或者分號(hào)來分割每個(gè)標(biāo)簽，用回退鍵刪除上一個(gè)標(biāo)簽。這篇文章主要介紹了vue組件TagsInput的相關(guān)知識(shí),需要的朋友可以參考下2020-05-05
vue使用echarts實(shí)現(xiàn)柱狀圖動(dòng)態(tài)排序效果
echarts在前端開發(fā)中實(shí)屬必不可缺的大數(shù)據(jù)可視化工具,這篇文章主要為大家詳細(xì)介紹了vue如何使用echarts實(shí)現(xiàn)柱狀圖動(dòng)態(tài)排序效果,感興趣的可以了解下2023-10-10
Vue中使一個(gè)div鋪滿全屏的實(shí)現(xiàn)
最近在項(xiàng)目開發(fā)中,就遇到了這個(gè)問題,Vue中如何使一個(gè)div鋪滿全屏,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-07-07
簡(jiǎn)易vuex4核心原理及實(shí)現(xiàn)源碼分析
這篇文章主要為大家介紹了簡(jiǎn)易vuex4核心原理及實(shí)現(xiàn)源碼分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
vue中想要mock數(shù)據(jù)在線上環(huán)境生效如何操作
本文主要介紹了在配置了mock數(shù)據(jù)之后在線上環(huán)境使用,主要通過在main.ts文件中注冊(cè)和vite.config.ts文件夾中配置插件來實(shí)現(xiàn),感興趣的可以了解一下2025-01-01
VUE2實(shí)現(xiàn)事件驅(qū)動(dòng)彈窗示例
本篇文章主要介紹了VUE2實(shí)現(xiàn)事件驅(qū)動(dòng)彈窗示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了vue如何預(yù)覽后端傳來的二進(jìn)制圖片，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vue cli3.0 引入eslint 結(jié)合vscode使用
這篇文章主要介紹了vue cli3.0 引入eslint 結(jié)合vscode使用，本文分步驟給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05