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...