Vue設(shè)置keepAlive不生效問題及解決
設(shè)置keepAlive不生效
如演示，Vue頁面導(dǎo)航回退后頁面重新刷新了，搜索條件及結(jié)果都重置了，對于頁面需要頻繁切換的系統(tǒng)來說，體驗(yàn)不佳，我們希望頁面第一次打開時(shí)加載，此后回退不再刷新
查閱了Vue官網(wǎng)后，發(fā)現(xiàn)vue2.0提供了一個(gè)keep-alive組件。
1.在App.vue中的設(shè)置
<template>
<div id="app">
<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.在router中的index.js設(shè)置
利用meta屬性
export default[
{
path:'/',
name:'home',
components:Home,
meta:{
keepAlive:true //需要被緩存的組件
},
{
path:'/book',
name:'book',
components:Book,
meta:{
keepAlive:false //不需要被緩存的組件
}
]正常的話這樣頁面就能緩存并生效了，如果還是不生效
檢查這個(gè)組件在router文件中的配置name和組件實(shí)例中的name不一致，如下面，全局守衛(wèi)中拿到的to或from的name是從router中對應(yīng)的路由對象中拿的，而App.js 中的keepAlive標(biāo)簽中的exclude是對比的組件實(shí)例中的name
使用過程發(fā)現(xiàn)，組件的name和router配置的name不一樣，keep-alive也無法生效，這里也提供給我們一種思路，如果頁面不需要緩存，把name設(shè)置不一樣就好了（不推薦使用）
keep-alive緩存組件不生效的坑
坑出現(xiàn)背景
在維護(hù)公司代碼時(shí)發(fā)現(xiàn)里面寫watch route不生效，無法監(jiān)聽子路由的table切換。組件不會(huì)緩存，但是全局組件已經(jīng)做過緩存處理。此處每次進(jìn)入此table頁都會(huì)觸發(fā)created周期?；ㄙM(fèi)大半個(gè)小時(shí)之后終于找到了問題點(diǎn)
坑的原因
keep-alive緩存時(shí)include中的名字必須與組件上的名字完全一致，組件沒有寫名字或者名字不一致就會(huì)導(dǎo)致緩存失效，每次進(jìn)入組件都觸發(fā)created生命周期
代碼如下
全局組件中
? <keep-alive include="history"> ? ? ? ?<router-view></router-view> ? ? </keep-alive>
組件中
export default {
? name: "history",/*此處的name必須有且與include中的一致*/
? components: {
? ? VTable
? },如是，問題解決!
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
文章介紹了如何在Vue中設(shè)置頁面全屏,包括下載插件、全屏、退出全屏、全屏切換等操作,同時(shí),還分享了在若依框架中實(shí)現(xiàn)主頁面內(nèi)容全屏的方法,包括配置全局變量和在布局文件中進(jìn)行設(shè)置2025-02-02
本文主要介紹了vue-electron中修改表格內(nèi)容并修改樣式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
最近在調(diào)研一些在線文檔的實(shí)現(xiàn),包括文檔編輯器、在線思維導(dǎo)圖、在線流程圖等,本文分享在Vue框架下基于metaeditor-mxgraph實(shí)現(xiàn)在線流程圖,感興趣的朋友一起看看吧2024-07-07
vue ElementUI的from表單實(shí)現(xiàn)登錄效果的示例
本文主要介紹了vue ElementUI的from表單實(shí)現(xiàn)登錄效果的示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家詳細(xì)介紹了Vue生命周期和數(shù)據(jù)共享，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
這篇文章主要給大家介紹了關(guān)于vue3使用百度地圖的相關(guān)資料,最近一個(gè)項(xiàng)目要用到地圖，因?yàn)槲⑿判〕绦蛴玫囊彩前俣鹊貓D，所以想著網(wǎng)頁端也用百度地圖,需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細(xì)介紹了Vue仿百度搜索功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要給大家介紹了關(guān)于axios如何全局注冊的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用axios具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
使用WebSocket+SpringBoot+Vue搭建簡易網(wǎng)頁聊天室的實(shí)現(xiàn)代碼
這篇文章主要介紹了使用WebSocket+SpringBoot+Vue搭建簡易網(wǎng)頁聊天室的實(shí)現(xiàn),具體的步驟如下,需要的朋友可以參考下2023-03-03
vue input 輸入校驗(yàn)字母數(shù)字組合且長度小于30的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue input 校驗(yàn)字母數(shù)字組合且長度小于30的實(shí)現(xiàn)代碼，文章給大家補(bǔ)充介紹了在Vue.Js下使用el-input框只能輸入數(shù)字并限制位數(shù)并且限制中文輸入以及粘貼功能，感興趣的朋友跟隨腳本之家小編一起看看吧2018-05-05