<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
? ? }
? },

至此返回上級頁面不刷新功能實現(xiàn)：因為在index.vue中，mounted方法只走一次，在瀏覽器上實現(xiàn)了返回原來滾動位置的目的。

說明

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

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

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

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

頁面回退后,不刷新問題

問題描述

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

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

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

問題解決

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

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

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

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

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

當(dā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的激活條件. 嘗試后確實有效。