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)文章
這篇文章主要給大家介紹了關(guān)于vue2中watch用法的相關(guān)資料,通過watch監(jiān)聽器,我們可以實時監(jiān)控數(shù)據(jù)的變化,并且在數(shù)據(jù)發(fā)生改變時進行相應(yīng)的操作,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue使用refs獲取嵌套組件中的值過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue + Echarts頁面內(nèi)存占用高的問題解決方案
點擊左側(cè)的菜單可以切換不同的看板,有些看板頁面中的報表比較多,用戶多次切換后頁面的內(nèi)存占用可以上升為GB級,嚴(yán)重時導(dǎo)致頁面內(nèi)存溢出,使得頁面崩潰,極大影響了用戶體驗,本文給大家介紹Vue + Echarts頁面內(nèi)存占用高的問題解決方案,感興趣的朋友一起看看吧2024-02-02
vue+el使用this.$confirm,不能阻斷代碼往下執(zhí)行的解決
這篇文章主要介紹了vue+el使用this.$confirm,不能阻斷代碼往下執(zhí)行的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了關(guān)于vite proxy跨域問題的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue3使用ref和reactive管理狀態(tài)的代碼示例
ref 和 reactive 是 Composition API 中用來聲明響應(yīng)式數(shù)據(jù)的兩個核心函數(shù),在 Vue 3 中,使用 setup 語法糖可以更簡潔地使用這些功能,本文將探討如何使用 ref 和 reactive 來管理狀態(tài),并解釋它們之間的區(qū)別,需要的朋友可以參考下2024-09-09
Vue 父子組件的數(shù)據(jù)傳遞、修改和更新方法
下面小編就為大家分享一篇Vue 父子組件的數(shù)據(jù)傳遞、修改和更新方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了詳解VUE中常用的幾種import（模塊、文件）引入方式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
今天小編就為大家分享一篇vuejs選中當(dāng)前樣式active的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了詳解nuxt sass全局變量(公共scss解決方案)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06