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组件会显著提高用户体验,菜单存在多级关系,多见于列表页+详情页的场景如:

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

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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值