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