vue動態改變keepAlive快取

2021-10-05 02:06:33 字數 1319 閱讀 2950

vue有乙個元件keepalive來實現頁面資料快取,在跳轉頁面時儲存頁面資料,在實際的專案中需要動態改變,實現動態儲存頁面資料。

在元件切換時,a→b  b不快取,b→c   b快取    實現方法如下:

export default ;

},watch: }}

}

在store資料夾下新建store.js檔案(維護設定快取和取消快取的方法,並共享快取陣列狀態)

import vue from 'vue';

import vuex from 'vuex';

vue.use(vuex);

export default new vuex.store(,

mutations: ,

// 對指定元件進行動態更改快取(不快取)--元件呼叫該方法時,從快取陣列中刪除對應的元件元素

nokeepalive(state, component) ,

}}) 

b.vue檔案(由於只有元件c>元件b才需要快取,所以如果to的元件不是c時,則給b設定不快取,從別的元件回來時,b則是不快取狀態)

需要動態改變是否快取的元件

export default

next();},}

router.js檔案(主要是全域性導航守衛,如果to的是元件b, 則設定為快取【便於跳轉到c再回來時,是快取狀態】)

import vue from 'vue';

import router from 'vue-router';

vue.use(router);

import store from '@/store';

const routes = [,]

let router = new router();

// 全域性導航守衛

router.beforeeach((to, from, next) =>

})export default router;

注意:to.name中的name不是路由中的name,而是每個vue類的name

export default {

name: "b"

vue動態改變title

1.不同路由路徑下,動態更改title 2.相同路徑下,像產品詳情頁,需要根據產品名字不同動態更改title 1.在router.js根據不同的路由配置所屬title 2.在main.js中配置 情況一 普通h5開發 router.beforeeach to,from next router.aft...

Vue動態改變keepAlive快取

功能需求 作為乙個懶癌 菜雞,我只想使用最簡單易懂的方式實現 以下為關鍵 include cached keep alive export default watch vuex的store.js檔案 維護設定快取和取消快取的方法,並共享快取陣列狀態 import vue from vue impor...

vue動態改變 disabled的屬性值

動態改變 disabled的屬性值 找了很久,可能沒人提這麼弱智的問題哭唧唧,所以我自己琢磨了很久,終於啊。首先 先把那個none改為乙個可以修改的值,這裡我隨便起的也叫disabled time1 valuetype format ref userbirthdayinput id userbirt...