vue專案使用keep alive的作用

2022-09-06 03:42:09 字數 727 閱讀 1541

vue專案使用keep-alive的作用

在vue專案中,難免會有列表頁面或者搜尋結果列表頁面,點選某個結果之後,返回回來時,如果不對結果頁面進行快取,那麼返回列表頁面的時候會回到初始狀態,但是我們想要的結果是返回時這個頁面還是之前搜尋的結果列表,這時候就需要用到vue的keep-alive技術了.

keep-alive 簡介

keep-alive 是 vue 內建的乙個元件,可以使被包含的元件保留狀態,或避免重新渲染。

用法也很簡單:

props

include - 字串或正則表達,只有匹配的元件會被快取

exclude - 字串或正規表示式,任何匹配的元件都不會被快取

複製**

// 元件 a

export default

}}複製**

可以保留它的狀態或避免重新渲染

可以保留它的狀態或避免重新渲染

但實際專案中,需要配合vue-router共同使用.

router-view 也是乙個元件,如果直接被包在 keep-alive 裡面,所有路徑匹配到的檢視元件都會被快取:

如果只想 router-view 裡面某個元件被快取,怎麼辦?

增加 router.meta 屬性

複製**

// routes 配置

export default [

}, }

]複製**

複製**

複製**

vue專案使用tinymce

首先直接 npm install tinymce s 把node modules tinymce下的skins資料夾和中文語言包解壓後的資料夾放到專案根目錄下 話不多說直接上 建立元件editor.vue 如下 class editor value content setting editorset...

vue專案svg使用

檔案 const path require path 傳遞乙個相對路徑,會處理得到乙個相對路徑 function resolve dir module.exports end 此時其實已經可以使用了 template中 icon qq use svg 在script中 import icons sv...

使用vue建立專案

在桌面建立乙個vue資料夾用來放置專案 終端輸入 cd desktop vue vue init webpack vuetest vuetest是專案名字 然後一路回車 進入專案 cd vuetest cnpm install 第一次建立時需要 以後開啟就不需要 cnpm run dev 如果dev...