zl程序教程

您现在的位置是:首页 >  前端

当前栏目

【Vue】通过keep-alive实现路由组件的数据缓存

Vue路由组件缓存数据 实现 通过 keep
2023-09-11 14:14:57 时间

1、在<router-view></router-view>加入keep-alive

      <!-- 注意:include缓存的是组件名 -->
      <keep-alive include="Menu_1">
        <router-view></router-view>
      </keep-alive>

2、如果缓存多个路由组件名

 <keep-alive include="['Menu_1','Menu_2']">

3、全局缓存 - App.vue组件中加入keep-alive标签

  <div id="app">
  	<keep-alive>
	    <div>
            ...
	    </div>
    </keep-alive>
  </div>