快捷導(dǎo)航

vue跳轉(zhuǎn)后不記錄歷史記錄的問題

更新時間：2022年09月21日 16:12:22 作者：武良神

這篇文章主要介紹了vue跳轉(zhuǎn)后不記錄歷史記錄的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue跳轉(zhuǎn)后不記錄歷史記錄

vue路由跳轉(zhuǎn)一般情況下是使用push，

?this.$router.push({
? ? ? ? ? ? ? ? path: "/testTeam/testTeam",
? ? ? ? ? ? ??
? ? ? ? ? ? ? });

若是特殊需求，頁面跳轉(zhuǎn)后不記錄到歷史記錄中，將push改為replace即可

this.$router.replace({path: '/project_selection'})

vue-router回退不記錄歷史

場景說明

對于單頁應(yīng)用來說，經(jīng)常會有登錄后訪問某個頁面的場景。比如

/index -> /login -> /page1

但是在page1返回上一頁時，會返回到登錄頁?；赝寺窂綖?/p>

/page1-> /login -> /index

因此需要進行跳過登錄頁的歷史記錄處理。

處理方案

1.router-link + history

<template>
? ?login頁
? ?<router-link replace to="/page1">登錄后訪問page1</router-link>
</template>

此時在page1頁的回退路徑為

/page1 -> /index

2.編程式跳轉(zhuǎn)

<template>
? ? ? ? login頁
? ? ? ? <button @click="replaceJump">登錄后訪問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對象還有其他跳轉(zhuǎn)api使用說明如下

? ? /**
? ? ?* 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;

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

VUE實現(xiàn)圖片驗證碼功能
這篇文章主要為大家詳細(xì)介紹了VUE實現(xiàn)圖片驗證碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-10-10
Vue利用computed解決單項數(shù)據(jù)流的問題
Vue是一個非常流行和強大的前端框架,它讓我們可以用簡潔和優(yōu)雅的方式來構(gòu)建用戶界面,但是,Vue也有一些需要注意和掌握的細(xì)節(jié)和技巧,今天我們來分享一個Vue中非常經(jīng)典的問題,也是一個非常實用的技巧,Vue利用computed解決單項數(shù)據(jù)流,需要的朋友可以參考下
2023-08-08
vuex 多模塊時模塊內(nèi)部的mutation和action的調(diào)用方式
這篇文章主要介紹了vuex 多模塊時模塊內(nèi)部的mutation和action的調(diào)用方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
vue + typescript + video.js實現(xiàn) 流媒體播放視頻監(jiān)控功能
視頻才用流媒體，有后臺實時返回數(shù)據(jù)，要支持flash播放，所以需安裝對應(yīng)的flash插件。這篇文章主要介紹了vue + typescript + video.js 流媒體播放視頻監(jiān)控,需要的朋友可以參考下
2019-07-07
vue3使用flv.js播放推流視頻的示例代碼
本文主要介紹了vue3使用flv.js播放推流視頻的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-05-05
Vue作用域插槽slot-scope實例代碼
這篇文章主要介紹了Vue作用域插槽slot-scope實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-09-09
詳解nginx配置vue h5 history去除#號
這篇文章主要介紹了詳解nginx配置vue h5 history去除#號，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-11-11
vue?parseHTML源碼解析hars?end?comment鉤子函數(shù)
這篇文章主要為大家介紹了vue?parseHTML源碼解析hars?end?comment鉤子函數(shù)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-07-07
十個有用的自定義Vue鉤子函數(shù)總結(jié)
這篇文章主要為大家介紹了十個Vue.js中有用的自定義鉤子，讓我們的代碼更加好看。文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下
2022-04-04
解決vue無法偵聽數(shù)組及對象屬性的變化問題
這篇文章主要介紹了解決vue無法偵聽數(shù)組及對象屬性的變化問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07