keep-Alive搭配vue-router實(shí)現(xiàn)緩存頁面效果的示例代碼
Vue工程中有些頁面需要有緩存。這個(gè)功能通過keep-alive組件實(shí)現(xiàn),keep-alive組件可以使被包含的組件保留狀態(tài),或避免重新渲染。
在routes.js中定義路由,在路由中定義元信息(meta字段),需要緩存的頁面就需要在meta對(duì)象中定義一個(gè)字段,這里設(shè)置為keepAlive,設(shè)置為true,反之,則不緩存。
{ path: '/a', component: () => import('@/pages/A'), meta: { title:'A', keepAlive: true } }, { path: '/b', component: () => import('@/pages/B'), meta: { title:'B', keepAlive: true } }, { path: '/c', component: () => import('@/pages/C'), meta: { title:'C', keepAlive: true } }
然后修改App.vue頁面
<template> <div id="app"> <!-- <router-view v-if="isRouterAlive"></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>
這樣就可以實(shí)現(xiàn)有目的的對(duì)頁面進(jìn)行緩存了。
但如果這時(shí)要實(shí)現(xiàn)從A頁面進(jìn)入B頁面后,讓A頁面不緩存的話我們還需要搭配上路由鉤子函數(shù)beforeRouteLeave()。
在A頁面中這樣寫:
beforeRouteLeave(to, from, next) { // 設(shè)置下一個(gè)路由的 meta if(to.meta.title=="B"){ from.meta.keepAlive = false; // 讓B不緩存,即刷新 } next(); }
用到keep-Alive,遇到的最多的一個(gè)問題就是怎么去掉這種緩存狀態(tài)。就比如用戶每一次進(jìn)行新流程的操作的時(shí)候,這個(gè)時(shí)候頁面還是緩存是不對(duì)的。
就比如,一個(gè)用戶登錄之后在某個(gè)緩存的頁面上填了信息,如果這個(gè)用戶注銷了之后,按道理,這些信息是應(yīng)該消失的,即恢復(fù)初始狀態(tài),但是這個(gè)時(shí)候不關(guān)閉頁面標(biāo)簽(因?yàn)樾麻_標(biāo)簽的話會(huì)使所有頁面重新渲染),用戶再次登錄回去,還會(huì)發(fā)現(xiàn)之前的頁面還是存在緩存的,即這個(gè)頁面沒有重新渲染。如果想要解決這個(gè)問題的話,就要提到activated和deactivated這兩個(gè)特殊的生存周期函數(shù)了。但是需要注意的是,activated和deactivated這兩個(gè)生存周期函數(shù)只存在于keep-Alive組件中。當(dāng)一個(gè)keep-Alive組件緩存生效的時(shí)候,它不會(huì)觸發(fā)平常我們熟悉的created()和mounted()這類生存周期函數(shù),因此不會(huì)被重新渲染,所以,它的狀態(tài)得以保留。但是我們可以通過這兩個(gè)生存周期函數(shù)來更新頁面。
先設(shè)置一個(gè)全局的標(biāo)志符,類型為布爾值,代表是否為緩存狀態(tài),你可以把它存進(jìn)vuex或者sessionStorage。(以下為存入sessionStorage為例)
在用戶登錄成功的時(shí)候設(shè)置為sessionStorage.setItem("keepAlive",false);然后在緩存頁面中添加如下代碼:
activated:function(){ if(sessionStorage.getItem("keepAlive")=='false'){ //進(jìn)行初始化 }else{ //to do } },
總結(jié)
到此這篇關(guān)于keep-Alive搭配vue-router實(shí)現(xiàn)緩存頁面效果的示例代碼的文章就介紹到這了,更多相關(guān)vue router實(shí)現(xiàn)緩存頁面內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳解vue+vuex+koa2開發(fā)環(huán)境搭建及示例開發(fā)
本篇文章主要介紹了詳解vue + vuex + koa2開發(fā)環(huán)境搭建及示例開發(fā),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01vue使用mint-ui實(shí)現(xiàn)下拉刷新和無限滾動(dòng)的示例代碼
本篇文章主要介紹了vue使用mint-ui實(shí)現(xiàn)下拉刷新和無限滾動(dòng)的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11如何在ElementUI的上傳組件el-upload中設(shè)置header
這篇文章主要介紹了如何在ElementUI的上傳組件el-upload中設(shè)置header,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09