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()
  },
......

保存代码,重新运行就会发现当第一次渲染好页面后,再次进入页面时不会再次加载渲染

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