vue跳轉(zhuǎn)后不記錄歷史記錄的問題
更新時(shí)間：2022年09月21日 16:12:22 作者：武良神
這篇文章主要介紹了vue跳轉(zhuǎn)后不記錄歷史記錄的問題及解決，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
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)常會有登錄后訪問某個(gè)頁面的場景。比如
/index -> /login -> /page1
但是在page1返回上一頁時(shí)，會返回到登錄頁?；赝寺窂綖?/p>
/page1-> /login -> /index
因此需要進(jìn)行跳過登錄頁的歷史記錄處理。
處理方案
1.router-link + history
<template> ? ?login頁 ? ?<router-link replace to="/page1">登錄后訪問page1</router-link> </template>
此時(shí)在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;
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了VUE實(shí)現(xiàn)圖片驗(yàn)證碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
Vue利用computed解決單項(xiàng)數(shù)據(jù)流的問題
Vue是一個(gè)非常流行和強(qiáng)大的前端框架,它讓我們可以用簡潔和優(yōu)雅的方式來構(gòu)建用戶界面,但是,Vue也有一些需要注意和掌握的細(xì)節(jié)和技巧,今天我們來分享一個(gè)Vue中非常經(jīng)典的問題,也是一個(gè)非常實(shí)用的技巧,Vue利用computed解決單項(xiàng)數(shù)據(jù)流,需要的朋友可以參考下2023-08-08
vuex 多模塊時(shí) 模塊內(nèi)部的mutation和action的調(diào)用方式
這篇文章主要介紹了vuex 多模塊時(shí) 模塊內(nèi)部的mutation和action的調(diào)用方式，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue + typescript + video.js實(shí)現(xiàn) 流媒體播放 視頻監(jiān)控功能
視頻才用流媒體，有后臺實(shí)時(shí)返回?cái)?shù)據(jù)， 要支持flash播放， 所以需安裝對應(yīng)的flash插件。這篇文章主要介紹了vue + typescript + video.js 流媒體播放 視頻監(jiān)控,需要的朋友可以參考下2019-07-07
本文主要介紹了vue3使用flv.js播放推流視頻的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
這篇文章主要介紹了Vue作用域插槽slot-scope實(shí)例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了詳解nginx配置vue h5 history去除#號，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
vue?parseHTML源碼解析hars?end?comment鉤子函數(shù)
這篇文章主要為大家介紹了vue?parseHTML源碼解析hars?end?comment鉤子函數(shù)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
十個(gè)有用的自定義Vue鉤子函數(shù)總結(jié)
這篇文章主要為大家介紹了十個(gè)Vue.js中有用的自定義鉤子，讓我們的代碼更加好看。文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2022-04-04
這篇文章主要介紹了解決vue無法偵聽數(shù)組及對象屬性的變化問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07