版權

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

keep-alive作用將元件例項快取下來

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

2、清除元件快取

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

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

補充知識：vue 簡單的頁面重新整理或者跳轉頁面的資料儲存問題

當我們想重新整理頁面也儲存當時的資料的時候，會遇到這樣那樣的問題，其實，僅僅的幾行程式碼就什麼都解決了，下面是程式碼（js）：

var vm = new Vue({
 el:'.search_moduel',data:{
  history:[] //儲存查詢歷史記錄的資料
 },methods:{
  //重新整理頁面或者從別的頁面進入，提取this.history的值
  getPageData:function(){
  this.history = JSON.parse(localStorage.getItem('this.history'));//使用getItem方法的前提是，你再自己需要的地方使用了setItem方法
  }
 },//鉤子函式，在例項被建立之後被呼叫，呼叫getPageData()
 created:function(){
  this.getPageData();
 }
 });

以上這篇Vue切換元件實現返回後不重置資料,保留歷史設定操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。