vue中使用keepAlice的各種問題

2022-09-09 18:03:17 字數 933 閱讀 9140

專案需求:從專案列表頁index,進入到列表的詳情頁detail,再從detail返回到index,需要快取index的資料

<

template

>

<

div

id>

<

keep-alive

>

<

router-view

v-if

="$route.meta.keepalive"

>

router-view

>

keep-alive

>

<

router-view

v-if

="!$route.meta.keepalive"

>

router-view

>

div>

template

>

在router中meta上新增keepalive: true

配置完成後,從detail 返回 index 快取了之前的資料,達到了預期的效果!

但接著問題來了,從其他頁面進入到index也取了快取的資料,沒有重新請求~~

解決思路:從路由守衛下手

在這裡我們需要用到路由的beforeroutele**e鉤子函式

在需要快取的頁面 index 加上下面這段**:

最後,測試,正是我要的效果,完美!

Vue之在vue中使用render

使用components進行渲染得到 建立 vue 例項,得到 viewmodel var vm newvue methods components script body html 使用render 這裡 return 的結果,會 替換頁面中 el 指定的那個 容器 建立 vue 例項,得到 vi...

Vue 如何在Vue中使用樣式

使用class樣式 1.陣列 第一種使用方式,直接傳遞乙個陣列,注意 這裡的class需要使用 v bind做資料繫結 2.陣列中使用三元表示式 3.陣列中巢狀物件 4.直接使用物件 不用陣列包裹 既然是乙個物件,那我們也可以直接在data身上寫進行儲存 內聯樣式 1.直接在元素上通過v bind ...

vue中使用加密 解密

首先引入cdn src script 在webpack.base.conf.js配置 externals 在src目錄下,建立crypto資料夾,新建index.js檔案,寫入加密 export default return encrypted.tostring 解密 get word,keystr...