Vue跳轉(zhuǎn)到新頁面再返回到舊頁面保持狀態(tài)不變的問題

更新時間：2025年04月28日 14:32:32 作者：zhaocarbon

這篇文章主要介紹了Vue跳轉(zhuǎn)到新頁面再返回到舊頁面保持狀態(tài)不變的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

Vue跳轉(zhuǎn)到新頁面再返回到舊頁面保持狀態(tài)不變

新項目中遇到了A頁面跳轉(zhuǎn)到B頁面用戶填寫并收集數(shù)據(jù)相關(guān)數(shù)據(jù)成功返回到A頁面時，A頁面被重置刷新，所有已經(jīng)填寫的其他數(shù)據(jù)均沒了的問題，為了解決這個問題，我們不得不使用以下方案解決問題：

頁面路由如下：

A頁面：path: '/project/add',
B頁面：path: '/project/researchGroup',

解決方案：使用keep-alive

1.在vue.app中添加keep-alive標(biāo)簽

<template>
    <div id="app">
        <keep-alive>
            <router-view v-if="$route.meta.keepAlive" />
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive" />
    </div>
</template>

<script>
    export default {
        name: 'App'
    }
</script>

2.在router文件下的index.js中添加meta節(jié)點(diǎn)并新增keepAlive:true

3.在B頁面中添加

搞定??！飛起！！

當(dāng)然因為B頁面有可能還有其他子級頁面等，根據(jù)根據(jù)相應(yīng)的邏輯完善這塊兒的邏輯即可！

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

Vue之表單事件數(shù)據(jù)綁定詳解
這篇文章主要為大家介紹了Vue之表單事件的數(shù)據(jù)綁定，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助,希望能夠給你帶來幫助
2021-11-11
詳解vue-cli腳手架中webpack配置方法
這篇文章主要介紹了詳解vue-cli腳手架中webpack配置方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-08-08
基于vue封裝一個安全鍵盤組件
大部分中文應(yīng)用彈出的默認(rèn)鍵盤是簡體中文輸入法鍵盤,在輸入用戶名和密碼的時候,如果使用簡體中文輸入法鍵盤,用戶的輸入記錄會被緩存下來所以我們需要一個安全鍵盤,本文給大家介紹了如何基于vue封裝一個安全鍵盤組件,需要的朋友可以參考下
2023-12-12
Vue3+ts+setup?getCurrentInstance使用時遇到的問題以及解決辦法
getCurrentInstance方法用于獲取當(dāng)前組件實(shí)例,僅在setup和生命周期中起作用,下面這篇文章主要給大家介紹了關(guān)于Vue3+ts+setup?getCurrentInstance使用時遇到的問題以及解決辦法,需要的朋友可以參考下
2022-08-08
詳解Vue路由自動注入實(shí)踐
這篇文章主要介紹了詳解Vue路由自動注入實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
vue中post請求報400的解決方案
這篇文章主要介紹了vue中post請求報400的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue使用video插件vue-video-player的示例
這篇文章主要介紹了vue使用video插件vue-video-player的示例，幫助大家更好的理解和使用vue插件，感興趣的朋友可以了解下
2020-10-10
Vue Element-ui 鍵盤事件失效的解決
這篇文章主要介紹了Vue Element-ui 鍵盤事件失效的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue3安裝vant實(shí)現(xiàn)按需引入和全局引入
本文主要介紹了vue3安裝vant實(shí)現(xiàn)按需引入和全局引入，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
淺談vue 單文件探索
這篇文章主要介紹了淺談vue 單文件探索，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-09-09