Vue設置keepAlive不生效問題及解決
設置keepAlive不生效
如演示，Vue頁面導航回退后頁面重新刷新了，搜索條件及結(jié)果都重置了，對于頁面需要頻繁切換的系統(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周期。花費大半個小時之后終于找到了問題點
坑的原因
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 keepAlive頁面強制刷新方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了vue屬性props默認類型的寫法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
下面小編就為大家分享一篇vue實現(xiàn)模態(tài)框的通用寫法推薦，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue中使用axios post上傳頭像/圖片并實時顯示到頁面的方法
今天小編就為大家分享一篇vue中使用axios post上傳頭像/圖片并實時顯示到頁面的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要給大家介紹了關于Vue中xlsx的使用方法指南,有很多辦法都可以實現(xiàn),其中最簡單的還是使用插件xlsx,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2023-07-07
這篇文章給大家介紹了vue中本地靜態(tài)圖片路徑寫法及Vue.js中引用圖片路徑的方式，需要的朋友參考下吧2018-03-03
Element的穿梭框數(shù)據(jù)量大時點擊全選卡頓的解決方案
本文主要介紹了Element的穿梭框數(shù)據(jù)量大時點擊全選卡頓的解決方案，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
移動端滑動切換組件封裝 vue-swiper-router實例詳解
這篇文章主要介紹了移動端滑動切換組件封裝 vue-swiper-router實例詳解,需要的朋友可以參考下2018-11-11
在Vue3中watch特性進行了一些改變和優(yōu)化,與computed不同,watch通常用于監(jiān)聽數(shù)據(jù)的變化,并執(zhí)行一些副作用,這篇文章主要給大家介紹了關于VUE3數(shù)據(jù)偵聽的相關資料,需要的朋友可以參考下2023-12-12
今天小編就為大家分享一篇vuejs 動態(tài)添加input框的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08