<template>
? <div id="app">
? ? <!--<router-view/>-->
? ? <!--頁(yè)面返回不刷新-->
? ? <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頁(yè)面

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

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

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

說明

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

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

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

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

頁(yè)面回退后,不刷新問題

問題描述

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

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

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

問題解決

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

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

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

activated顧名思義是激活，也就是進(jìn)入頁(yè)面后立即觸發(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í)有效。