Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
使用vue開發時,當進行頁面之間的切換時,上一個頁面將會被銷毀。但是當我們想節省性能以及保留用戶上次操作的結果或避免ajax重復請求的時候,需要把某些特定的頁面緩存下來。
在vue中,提供了內置組件 keep-alive , <keep-alive> 包裹動態組件時,會緩存不活動的組件實例,而不是銷毀它們。和 <transition> 相似,<keep-alive> 是一個抽象組件:它自身不會渲染一個 DOM 元素,也不會出現在父組件鏈中。
當組件在 <keep-alive> 內被切換,它的 activated 和 deactivated 這兩個生命周期鉤子函數將會被對應執行。
當我們想把所有頁面都緩存時,只需要用 keep-alive 包裹 router-view 即可。
但是大多數情況下,我們只需要把某些不需要請求的頁面緩存下來。則我們需要某些特定的頁面實現緩存即可。
解決方法: 通過v-if 監聽指定變量來實現對指定頁面的緩存;此處我監聽的是 $route.meta 中自定義的變量。
給需要緩存的頁面其 $route.meta 值設為 true, 不需要設為 false 。在頁面發生切換時, 其 $route.meta 會做出對應變化,通過watch 可以實時監聽到 。
之后通過v-if 來綁定此變量即可。
效果:
某一些特定場景下,跳轉頁面后再返回我們不希望銷毀組件,而是希望頁面緩存下來,保存跳轉前的狀態,這時候就可以用到keep-alive組件。
要:禁止input緩存,禁止select緩存
有時候,我們頁面的輸入框,我們再頁面里輸入內容后,并不保存,但是刷新頁面會發現值為輸入的頁面,完全沒有從新去從后臺取值,這是怎么回事呢?如下:
雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆
<input type="text" value="">
<select>
<option value="1">1</option>
<option value="2">1</option>
</select>
其實多數瀏覽器默認會緩存input的值,只有使用ctl+F5強制刷新的才可以清除緩存記錄。如果不想讓瀏覽器緩存input的值,很簡單,只需要價格屬性即可:autocomplete=”off”。
例如上面例子,改為如下就不會緩存啦:
<input type="text" autocomplete="off" value="">
<select autocomplete="off">
<option value="1">1</option>
<option value="2">1</option>
</select>
聽說還有一種直接加在form表單里也可以,但是因為我已經很久沒有用form表單提交數據啦,都是用ajax異步提交的,所以我就沒有采取這種方法,也很簡單的如下:
<form action="#" autocomplete="off">
<input type="text" value/>
</form>
當然,沒試過不知道行不行,應該是沒問題的!
*請認真填寫需求信息,我們會在24小時內與您取得聯系。