vue返回上一頁面時(shí)不刷新問題及解決方案

更新時(shí)間：2022年05月26日 10:52:38 作者：qq_39355295

這篇文章主要介紹了vue返回上一頁面時(shí)不刷新問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

返回上一頁面時(shí)不刷新

前景

在日常使用的時(shí)候，我們經(jīng)常需要返回上一級(jí)頁面的時(shí)候，不刷新頁面，保持頁面不變，這里就需要使用以下方法：

思路

因?yàn)関ue是單頁面應(yīng)用，進(jìn)入其他頁面時(shí)會(huì)銷毀該頁面，用keep-alive不讓其刷新，具體實(shí)現(xiàn)為：

(1).在App.vue中加入

這里是所有頁面切換到地方，下面代碼分別對不同的設(shè)置，采用不同的渲染方式。

<template>
? <div id="app">
? ? <!--<router-view/>-->
? ? <!--頁面返回不刷新-->
? ? <keep-alive>
? ? ? <router-view v-if="$route.meta.keepAlive"></router-view>
? ? </keep-alive>
? ? <router-view v-if="!$route.meta.keepAlive"></router-view>
? </div>
</template>

(2).index.js頁面

在需要設(shè)置不刷新的頁面中，只需要添加 keepAlive: true就可以。

export default new Router({
? routes: [{
? ? path: '/',
? ? name: 'index',
? ? component: index,
? ? meta: {
? ? ? keepAlive: true
? ? }
? },

至此返回上級(jí)頁面不刷新功能實(shí)現(xiàn)：因?yàn)樵趇ndex.vue中，mounted方法只走一次，在瀏覽器上實(shí)現(xiàn)了返回原來滾動(dòng)位置的目的。

說明

備注：一般執(zhí)行完上一步的時(shí)候就已經(jīng)實(shí)現(xiàn)方法了，如果在手機(jī)上測試，發(fā)現(xiàn)沒用：可以試著添加下面的代碼試一下：

//在頁面離開時(shí)記錄滾動(dòng)位置
beforeRouteLeave (to, from, next) {
? ? this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
? ? next()
? },

//進(jìn)入該頁面時(shí)，用之前保存的滾動(dòng)位置賦值
beforeRouteEnter (to, from, next) {
? ? next(vm => {
? ? ? document.body.scrollTop = vm.scrollTop
? ? })
? },

至此完美結(jié)束，算是一個(gè)比較常見而且簡單的功能了。

頁面回退后,不刷新問題

問題描述

index頁面中呈現(xiàn)一個(gè)item列表，有一個(gè)【新增】按鈕，點(diǎn)擊后，跳轉(zhuǎn)到了新增頁面addNewInfo.vue, 保存了新增記錄后，跳轉(zhuǎn)回到index頁面，此時(shí)index中的item列表不能刷新。

在index中的created, mounted鉤子中添加了查詢方法，無法觸發(fā)

created() {
?? ?this.queryHandler()
},
mounted() {
?? ?this.queryHandler()
}

問題解決

查詢了該問題后，得知有兩種方式可以解決該問題

使用activated鉤子函數(shù)
watch中添加對this.$route的監(jiān)聽

兩種方式均可以解決問題，但是個(gè)人偏愛第一種，簡單方便

activated顧名思義是激活，也就是進(jìn)入頁面后立即觸發(fā)，然而有個(gè)前提，如官網(wǎng)API文檔所說：

被 keep-alive 緩存的組件激活時(shí)調(diào)用

當(dāng)前項(xiàng)目使用的vue-element-admin框架，在框架中的AppMain.vue中已經(jīng)在<router-view>外層包括了<keep-alive>：

<template>
? <section class="app-main">
? ? <transition name="fade-transform" mode="out-in">
? ? ? <keep-alive :include="cachedViews">
? ? ? ? <router-view :key="key" />
? ? ? </keep-alive>
? ? </transition>
? </section>
</template>

因此所有的組件目前都是被keep-alive緩存的，符合activated的激活條件. 嘗試后確實(shí)有效。