vue中keep-alive路由缓存

// 组件 a
export default {
  name: ‘a‘,
  data () {
    return {}
  }
}

<keep-alive include="a">
  <component>
    <!-- name 为 a 的组件将被缓存！ -->
  </component>
</keep-alive>可以保留它的状态或避免重新渲染

需要router

<keep-alive>
    <router-view>
        <!-- 所有路径匹配到的视图组件都会被缓存！ -->
    </router-view>
</keep-alive>

• 使用 include/exclude
• 增加 router.meta 属性

  // 组件 a
  export default {
    name: ‘a‘,
    data () {
      return {}
    }
  }

  <keep-alive include="a">
      <router-view>
          <!-- 只有路径匹配到的视图 a 组件会被缓存！ -->
      </router-view>
  </keep-alive>

  增加router属性

  // routes 配置
  export default [
    {
      path: ‘/‘,
      name: ‘home‘,
      component: Home,
      meta: {
        keepAlive: true // 需要被缓存
      }
    }, {
      path: ‘/:id‘,
      name: ‘edit‘,
      component: Edit,
      meta: {
        keepAlive: false // 不需要被缓存
      }
    }
  ]    

  <keep-alive>
      <router-view v-if="$route.meta.keepAlive">
          <!-- 这里是会被缓存的视图组件，比如 Home！ -->
      </router-view>
  </keep-alive>
  
  <router-view v-if="!$route.meta.keepAlive">
      <!-- 这里是不被缓存的视图组件，比如 Edit！ -->
  </router-view>

  分析一个写的很详细的地方：很详细https://www.jianshu.com/p/0b0222954483

•