vue Tab切换以及缓存页面处理的几种方式

操作了。为了效果好看，我们可能还需要一些

tab

的

active

样式，这里不作演示。

3.缓存组件

仅仅是做tab切换，远远是不够的，毕竟大家想要tab页就是要来回切换操作，我们需要保存他在不同tab里操作的进度，比如说填写的表单信息，或者已经查询好的数据列表等。
那么我们要怎么缓存组件呢？
只需要用到vue中的

keep-alive组件

3.1 keep-alive

<keep-alive>

是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

<keep-alive>

包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

<keep-alive>

与

<transition>

相似，只是一个抽象组件，它不会在DOM树中渲染(真实或者虚拟都不会)，也不在父组件链中存在，比如：你永远在

this.$parent

中找不到

keep-alive

。

注：不能使用

keep-alive

来缓存固定组件，会无效

//无效
<keep-alive>
 <my-component></my-component>
</keep-alive>

3.2 使用

3.2.1 老版本

vue 2.1

之前的使用

<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

需要在路由信息里面设置

router

的元信息

meta

export default new Router({
 routes: [
  {
   path: '/a',
   name: 'A',
   component: A,
   meta: {
    keepAlive: false // 不需要缓存
   }
  },
  {
   path: '/b',
   name: 'B',
   component: B,
   meta: {
    keepAlive: true // 需要被缓存
   }
  }
 ]})

3.2.2 比较新而且简单的用法

直接缓存所有组件/路由

<keep-alive>
  <router-view/>
</keep-alive>
<keep-alive>
  <component :is="view"></component>
</keep-alive>

使用

include

来处理需要缓存的组件/路由