解決vue單頁使用keep-alive頁面返回不刷新的問題

使用vue單頁開發(fā)項目時遇到一個很惡心的問題：在列表頁點擊一條數(shù)據(jù)進入詳情頁，按返回鍵返回列表頁時頁面刷新了，用戶體驗非常差?。。?！查閱了一下相關問題，使用<keep-alive>解決這個問題，下面是我的使用心得。

創(chuàng)新互聯(lián)成立于2013年，是專業(yè)互聯(lián)網(wǎng)技術服務公司，擁有項目成都網(wǎng)站建設、網(wǎng)站建設網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元合浦做網(wǎng)站,已為上家服務,為合浦各地企業(yè)和個人服務,聯(lián)系電話:028-86922220

<keep-alive>是Vue的內(nèi)置組件，能在組件切換過程中將狀態(tài)保留在內(nèi)存中，防止重復渲染DOM。

首先在App.vue頁面上有下面一段代碼，我們都知道這是頁面渲染的地方

<router-view></router-view>

把這段代碼改成如下：

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

我們能看到這段代碼做的邏輯判斷，當路由的meta屬性的keepAlive屬性值為true時頁面的狀態(tài)保存，其他情況下不保存狀態(tài)。

然后就是給我們路由設置keepAlive屬性值，比如我是給主頁（列表頁）的路由設置了keepAlive屬性為true。

{ 
name: 'index', 
path: '/index', 
title: '主頁', 
component(resolve) { 
require(['views/index.vue'], resolve) 
}, 
meta: { 
pageTitle: '主頁', 
keepAlive: true 
} 
}

這樣設置了之后，主頁的狀態(tài)就會保存，返回鍵返回到主頁時頁面不會刷新請求數(shù)據(jù)了。

但是有問題?。。。闹黜撎饺魏雾撁妫俜祷刂黜摱疾粫⑿马撁?！這并不是我想要的，我只要從詳情頁返回列表頁時不刷新頁面，其他情況下是需要刷新的，那么我就需要定制化處理了。大致思路就是從主頁跳轉(zhuǎn)到其他頁面時把主頁的keepAlive值設置為false，從詳情頁返回主頁時把主頁的keepAlive值設置為true就好了，代碼如下：

主頁跳轉(zhuǎn)到其他頁面時把主頁的keepAlive值設置為false

export default {
 data() {
 return {
 };
 },
 mounted() {
 },
 methods: {
 },
 //修改列表頁的meta值，false時再次進入頁面會重新請求數(shù)據(jù)。
 beforeRouteLeave(to, from, next) {
 from.meta.keepAlive = false;
 next();
 }
};

從詳情頁返回主頁時把主頁的keepAlive值設置為true（要做個判斷，判斷是不是返回到主頁的）

export default {
 data() {
 return {
 };
 },
 mounted() {
 },
 methods: {
 },
 beforeRouteLeave(to, from, next) {
 if (to.path == "/index") {
 to.meta.keepAlive = true;
 } else {
 to.meta.keepAlive = false;
 }
 next();
 }
};

這里使用了beforeRouterLeave(to,from,next){}，它是methods平級的，具體使用方法可以查閱一下。

注意問題：

beforeRouterLeave必須寫在有配置路由的頁面上才有效的，最開始我想寫在App.vue頁面上，發(fā)現(xiàn)根本就不執(zhí)行的！

以上這篇解決vue單頁使用keep-alive頁面返回不刷新的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持創(chuàng)新互聯(lián)。

本文題目：解決vue單頁使用keep-alive頁面返回不刷新的問題
鏈接地址：http://muchs.cn/article6/pdhcig.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、自適應網(wǎng)站、營銷型網(wǎng)站建設、網(wǎng)站改版、品牌網(wǎng)站制作、手機網(wǎng)站建設

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容