vue跳轉(zhuǎn)后不記錄歷史記錄的問(wèn)題
更新時(shí)間：2022年09月21日 16:12:22 作者：武良神
這篇文章主要介紹了vue跳轉(zhuǎn)后不記錄歷史記錄的問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue跳轉(zhuǎn)后不記錄歷史記錄
vue路由跳轉(zhuǎn)一般情況下是使用push，
?this.$router.push({
? ? ? ? ? ? ? ? path: "/testTeam/testTeam",
? ? ? ? ? ? ??
? ? ? ? ? ? ? });若是特殊需求，頁(yè)面跳轉(zhuǎn)后不記錄到歷史記錄中，將push改為replace即可
this.$router.replace({path: '/project_selection'})vue-router回退不記錄歷史
場(chǎng)景說(shuō)明
對(duì)于單頁(yè)應(yīng)用來(lái)說(shuō)，經(jīng)常會(huì)有登錄后訪問(wèn)某個(gè)頁(yè)面的場(chǎng)景。比如
/index -> /login -> /page1
但是在page1返回上一頁(yè)時(shí)，會(huì)返回到登錄頁(yè)。回退路徑為
/page1-> /login -> /index
因此需要進(jìn)行跳過(guò)登錄頁(yè)的歷史記錄處理。
處理方案
1.router-link + history
<template> ? ?login頁(yè) ? ?<router-link replace to="/page1">登錄后訪問(wèn)page1</router-link> </template>
此時(shí)在page1頁(yè)的回退路徑為
/page1 -> /index
2.編程式跳轉(zhuǎn)
<template>
? ? ? ? login頁(yè)
? ? ? ? <button @click="replaceJump">登錄后訪問(wèn)page1</button>
</template>
? ??
<script setup lang='ts'>
? ? import {useRouter} from 'vue-router'
? ? const router = useRouter();
? ? // 傳遞全路徑跳轉(zhuǎn)
? ? const replaceJump = ()=>{
? ? ? ? router.replace('/page1')
? ? }
</script>
? ??
<style>
? ??
</style>結(jié)果同上。
其他api跳轉(zhuǎn)
此外，router對(duì)象還有其他跳轉(zhuǎn)api使用說(shuō)明如下
? ? /** ? ? ?* Go back in history if possible by calling `history.back()`. Equivalent to ? ? ?* `router.go(-1)`. ? ? ?*/ ? ? back(): ReturnType<Router['go']>; ? ? /** ? ? ?* Go forward in history if possible by calling `history.forward()`. ? ? ?* Equivalent to `router.go(1)`. ? ? ?*/ ? ? forward(): ReturnType<Router['go']>; ? ? /** ? ? ?* Allows you to move forward or backward through the history. Calls ? ? ?* `history.go()`. ? ? ?* ? ? ?* @param delta - The position in the history to which you want to move, ? ? ?* relative to the current page ? ? ?*/ ? ? go(delta: number): void;
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue2中watch的用法(通俗易懂,簡(jiǎn)單明了)
這篇文章主要給大家介紹了關(guān)于vue2中watch用法的相關(guān)資料,通過(guò)watch監(jiān)聽(tīng)器,我們可以實(shí)時(shí)監(jiān)控?cái)?shù)據(jù)的變化,并且在數(shù)據(jù)發(fā)生改變時(shí)進(jìn)行相應(yīng)的操作,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue使用refs獲取嵌套組件中的值過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue + Echarts頁(yè)面內(nèi)存占用高的問(wèn)題解決方案
點(diǎn)擊左側(cè)的菜單可以切換不同的看板,有些看板頁(yè)面中的報(bào)表比較多,用戶多次切換后頁(yè)面的內(nèi)存占用可以上升為GB級(jí),嚴(yán)重時(shí)導(dǎo)致頁(yè)面內(nèi)存溢出,使得頁(yè)面崩潰,極大影響了用戶體驗(yàn),本文給大家介紹Vue + Echarts頁(yè)面內(nèi)存占用高的問(wèn)題解決方案,感興趣的朋友一起看看吧2024-02-02
vue+el使用this.$confirm,不能阻斷代碼往下執(zhí)行的解決
這篇文章主要介紹了vue+el使用this.$confirm,不能阻斷代碼往下執(zhí)行的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
關(guān)于vite proxy跨域問(wèn)題的解決
這篇文章主要介紹了關(guān)于vite proxy跨域問(wèn)題的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue3使用ref和reactive管理狀態(tài)的代碼示例
ref 和 reactive 是 Composition API 中用來(lái)聲明響應(yīng)式數(shù)據(jù)的兩個(gè)核心函數(shù),在 Vue 3 中,使用 setup 語(yǔ)法糖可以更簡(jiǎn)潔地使用這些功能,本文將探討如何使用 ref 和 reactive 來(lái)管理狀態(tài),并解釋它們之間的區(qū)別,需要的朋友可以參考下2024-09-09
Vue 父子組件的數(shù)據(jù)傳遞、修改和更新方法
下面小編就為大家分享一篇Vue 父子組件的數(shù)據(jù)傳遞、修改和更新方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要介紹了詳解VUE中常用的幾種import（模塊、文件）引入方式，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
vuejs選中當(dāng)前樣式active的實(shí)例
今天小編就為大家分享一篇vuejs選中當(dāng)前樣式active的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
這篇文章主要介紹了詳解nuxt sass全局變量(公共scss解決方案)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06