欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue切換組件實(shí)現(xiàn)返回后不重置數(shù)據(jù),保留歷史設(shè)置操作

 更新時(shí)間:2020年07月21日 09:02:54   作者:Sun~Neo  
這篇文章主要介紹了Vue切換組件實(shí)現(xiàn)返回后不重置數(shù)據(jù),保留歷史設(shè)置操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

版權(quán)

1、<router-view ></router-view> 外層包圍<keep-alive> </keep-alive>

keep-alive作用將組件實(shí)例緩存下來

<keep-alive>
  <router-view></router-view>
</keep-alive>

2、清除組件緩存

使用keep-alive 的 exclude="組件名" 屬性

<keep-alive exclude="home">
    <router-view ></router-view>
</keep-alive>

補(bǔ)充知識(shí):vue 簡(jiǎn)單的頁(yè)面刷新或者跳轉(zhuǎn)頁(yè)面的數(shù)據(jù)保存問題

當(dāng)我們想刷新頁(yè)面也保存當(dāng)時(shí)的數(shù)據(jù)的時(shí)候,會(huì)遇到這樣那樣的問題,其實(shí),僅僅的幾行代碼就什么都解決了,下面是代碼(js):

var vm = new Vue({
 el:'.search_moduel',
 data:{
  history:[] //存儲(chǔ)查詢歷史記錄的數(shù)據(jù)
 },
 methods:{
  //刷新頁(yè)面或者從別的頁(yè)面進(jìn)入,提取this.history的值
  getPageData:function(){
  this.history = JSON.parse(localStorage.getItem('this.history'));//使用getItem方法的前提是,你再自己需要的地方使用了setItem方法
  }
 },
 //鉤子函數(shù),在實(shí)例被創(chuàng)建之后被調(diào)用,調(diào)用getPageData()
 created:function(){
  this.getPageData();
 }
 });

以上這篇Vue切換組件實(shí)現(xiàn)返回后不重置數(shù)據(jù),保留歷史設(shè)置操作就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論