Vue核心技术-38,vue-router-缓存路由组件

一,前言

一些组件需要通过接口请求数据来进行显示,请求数据会造成一定的等待时间
如果反复切换组件,那就需要反复进行数据请求,并且这部分数据返回时相同的
那么可以在组件第一次加载时,将组件对象缓存起来
当切换路由显示时,组件对象被缓存起来,不被销毁,以提升再次查看时的用户体验
如:Tab页制作的各种状态的订单列表切换

当然,这取决于你的数据是否需要较高的实时性

---

二,验证

使用上一篇的例子做个测试:在首页路由组件中添加一个输入框

Home.Vue

<template>
  <div>
    <h2>首页</h2>
    <!--添加一个输入框-->
    <input type="text">
  </div>
</template>

<script>

</script>

<style>

</style>

运行项目;
默认显示首页,在新增的input中填写123:

切换到商品页面,再切换会首页,发现input输入的123消失了

这说明当路由链接切换时,会销毁组件对象,当返回时会重新创建组件对象

---

三,缓存路由组件

缓存路由组件非常简单,只要在被缓存在路由组件对象添加<keep-alive>标签可以实现
首页路由组件是在根组件App.vue进行调用的,所以修改App.vue

<template>
  <div>
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>网上书城</h2></div>
      </div>
    </div>

    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
          <!--路由链接-->
          <router-link to="/home" class="list-group-item">首页</router-link>
          <router-link to="/product" class="list-group-item">商品</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
            <!--缓存组件对象-->
            <keep-alive>
              <router-view></router-view>
            </keep-alive>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

</script>

<style>

</style>

---

四,重新验证

运行项目;
默认显示首页,在新增的input中填写123:

切换到商品页面,再切换会首页,发现input输入的123仍在,说明首页组件对象被缓存,没有重新被创建

---

五,结尾

当然,这取决于组件数据是否需要较高的实时性,如果是股票这种高实时性的数据就不太合适了

应用场景:
    Tab页,接口获取数据需要消耗时间和流量,如果实时要求不是非常高可以缓存起来

记住这个标签,优化时可能会很有用
<keep-alive>
    <router-view></router-view>
</keep-alive>

---

向路由组件传递数据

创建商品详情组件—3步骤

传值2种
1,param query
2,通过路由组件标签携带参数
组件传值通过props传入
组件通过进行显示