Vue-router:12、路由组件缓存

Vue-router:12、路由组件缓存

利用keepalive做组件缓存，保留组件状态，提高执行效率。

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

使用include或者exclude时要给组件设置name（这个是组件的名称，组件的名称通过给组件添加name属性来进行设置）

当我们进行路由切换的时候，对应的组件会被重新创建，同时数据也会不断的重新加载。

如果数据没有变化，就没有必要每次都重新发送异步请求加载数据

现在，在App组件中添加keep-alive

因为切换的组件都是在该router-view中进行展示。

  <!-- 右侧内容区域 -->
          <div class="content right"><div class="main-content">
            <keep-alive>
             <router-view />
             </keep-alive>
             </div></div>
        </div>

下面可以进行验证。

 const Rights = {
        template: `<div>
          <h3>权限管理区域</h3>
        </div>`,
        created() {
          console.log(new Date());
        },
      };

在Rights组件中，添加了created方法，该方法中输出日期时间，但是我们不断的切换，发现并不是每次都打印日期时间内容。

当然，以上keep-alive的使用方式，是将所有的组件都缓存了，如果只想缓存某个组件，可以采用如下的方式

 <!-- 右侧内容区域 -->
          <div class="content right"><div class="main-content">
            <keep-alive include='goods'>
             <router-view />
             </keep-alive>
             </div></div>
        </div>

在上面的代码中，通过include添加了需要缓存的组件的名称，如果有多个在include中可以继续添加，每个组件名称之间用逗号分隔。

以上的含义就是只有goods组件需要被缓存(goods是组件的name值)

 const Goods = {
        name: "goods",
        template: `<div>
          <h3>商品管理区域</h3>
        </div>`,
        created() {
          console.log(new Date());
        },
      };

exclude表示的就是除了指定的组件以外（也是组件的name），其它组件都进行缓存。

应用场景

如果未使用keep-alive组件，则在页面回退时仍然会重新渲染页面，触发created钩子，使用体验不好。 在以下场景中使用keep-alive组件会显著提高用户体验，菜单存在多级关系，多见于列表页+详情页的场景如：

• 商品列表页点击商品跳转到商品详情，返回后仍显示原有信息
• 订单列表跳转到订单详情，返回，等等场景。

生命周期：
 activated和deactivated会在keep-alive内所有嵌套的组件中触发
 如：B页面是缓存页面
   当A页面跳到B页面时，B页面的生命周期：activated（可在此时更新数据）
   B页面跳出时，触发deactivated
   B页面自身刷新时，会触发created-mouted-activated