鍍金池/ 問(wèn)答/HTML5  HTML/ keep-alive 緩存的時(shí)候,我想動(dòng)態(tài)的判斷一個(gè)組件是否緩存,因?yàn)橐粋€(gè)組件進(jìn)

keep-alive 緩存的時(shí)候,我想動(dòng)態(tài)的判斷一個(gè)組件是否緩存,因?yàn)橐粋€(gè)組件進(jìn)去的方式不同有時(shí)候需要緩存有時(shí)候不需要緩存

keep-alive 緩存的時(shí)候,我想動(dòng)態(tài)的判斷一個(gè)組件是否緩存,因?yàn)橐粋€(gè)組件進(jìn)去的方式不同有時(shí)候需要緩存有時(shí)候不需要緩存

假設(shè)這里有 3 個(gè)路由: A、B、C。
需求:
默認(rèn)顯示 A
B 跳到 A,A 不刷新
C 跳到 A,A 刷新

在 A 路由里面設(shè)置 meta 屬性:

        {
                path: '/',
                name: 'A',
                component: A,
                meta: {
                    keepAlive: true // 需要被緩存
                }
        }

在 B 組件里面設(shè)置 beforeRouteLeave:
beforeRouteLeave(to, from, next) {

         // 設(shè)置下一個(gè)路由的 meta
        to.meta.keepAlive = true;  // 讓 A 緩存,即不刷新
        next();
    }

在 C 組件里面設(shè)置 beforeRouteLeave:
beforeRouteLeave(to, from, next) {

        // 設(shè)置下一個(gè)路由的 meta
        to.meta.keepAlive = false; // 讓 A 不緩存,即刷新
        next();
    }

這樣的話第一次 B 到 A 刷新,之后就沒(méi)事了,
我 console.log(to.meta.keepAlive) 打印的值也是 true
怎么才能解決這個(gè)問(wèn)題呢? 在線等

回答
編輯回答
咕嚕嚕

你可以看看這個(gè)我之前遇到了類似的問(wèn)題
鏈接

2018年2月24日 13:40
編輯回答
局外人

你在A組件里打印的 to.meta.keepAlive值?如果不是,可以在A組件加入

beforeRouteEnter(to, from, next) {
    console.log(to.meta.keepAlive)
    next();
}

這行代碼,我這邊沒(méi)有問(wèn)題。

圖1:App.vue
圖片描述

圖2:A.vue
圖片描述

圖3:B.vue
圖片描述

圖4:C.vue
圖片描述

在router里,給A.vue設(shè)置:

{
    path: '/',
    name: 'A',
    component: A,
    meta: {
        keepAlive: true // 需要被緩存
    }
}

A.vue里的beforeRouteEnter函數(shù)可以不加,我這里只是為了看to.meta.keepAlive的值是否正確

2017年7月24日 12:08