vue3 移動端 元件 前進快取 後退不快取

2021-10-14 05:44:52 字數 1057 閱讀 2785

用eventbus 事件匯流排來控制項是否需要快取:

//引入了外掛程式,注意全域性只能使用同乙個emitter

import mitt from 'mitt'

export const emitter = mitt()

預設所有頁面都進行快取,用:exclude="alivecomponent" ,排除不需要快取的元件,可以實現動態更改元件是否快取

alivecomponent: "newqueue,releaseset" //不需要快取的元件頁面名

// 新增不快取元件

function setnotalivecomponent(keyword: string)

datas.alivecomponent = aliveitems;

}// 移除不快取元件

function removenotalivecomponent(keyword: string)

});aliveitems = arr.join(",");

datas.alivecomponent = aliveitems;

}//接收 新增 不快取元件 事件

emitter.on("add-no-alive-compt", (e) => );

//接收 移除 不快取元件 事件

emitter.on("remove-no-alive-compt", (e) => );

然後,在需要快取的頁面中觸發事件

// 在不需要元件快取時,比如在後退按鈕中 新增 【不需要快取元件】

emitter.emit("add-no-alive-compt", "queue");

// 在需要元件快取時,比如在前進頁面前 移除 【不需要快取元件】

emitter.emit("remove-no-alive-compt", "queue");

這裡主要是混合開發中的h5,如果後退使用到瀏覽器自帶的後退功能,要結合路由來判斷當前頁面是否後退來進行觸發新增 是否快取事件了。

vue3新增Suspense元件

在開始介紹vue的suspense元件之前,我們有必要先了解一下react的suspense元件,因為他們的功能類似。react 16.6 新增了元件,讓你可以 等待 目標 載入,並且可以直接指定乙個載入的介面 像是個 spinner 讓它在使用者等待的時候顯示 const profilepage ...

Vue 3 元件註冊

上一節實驗中,我們大概了解了一下元件的基礎,這一節實驗我們要深入元件註冊。我們在註冊元件的時候,我們都會給元件起乙個名字,就好像我們人的名字一樣。需要注意的是,我們的元件名字是有一些規範的,一般這種單檔案元件,我們強烈推薦使用字母全小寫且必須包含乙個連字元,全部小寫字母,單詞使用中華線 隔開。例如我...

vue3 元件通訊 vue router

關於元件通訊 1.父子元件間傳值 props emit parent children ref 2.非父子元件傳值 事件匯流排 原理就是建立乙個公共的js檔案,專門用來傳遞資訊 import vue from vue export default new vue 在需要傳遞訊息的地方引入 impor...