Vue 後臺管理項目中使用keep-alive防止也沒每次打開都重載,影響使用體驗

1、修改AppMain.vue

將 加載組件的地方,使用keep-alive包含起來

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

2、修改具體的業務代碼

假設有一個用戶管理的頁面,修改該頁面裏面的代碼。
在使用keep-alive 時
created():不會在每次進入頁面時執行,而是隻執行一次。
activated():每次進入頁面時執行的activated 內的方法,但是當後端數據沒變化時,不會重載該頁面。

......
activated: function () {
    this.get_need_data() // 這是用於獲取數據的異步方法
  },
  created: function() {
    this.get_need_data()
  },
......

保存代碼,重新運行就會發現當第一次渲染好頁面後,再次進入頁面時不會再次加載渲染

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章