vue中keep-alive路由缓存

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

专属生命周期

activited        keep-alive专属,组件被激活时调用
deadctivated    keep-alive专属,组件被销毁时调用

用于子组件缓存,可以让子组件缓存还是不缓存

<!-- 失活的组件将会被缓存!-->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>
网上找的很不错,
1、直接使用
<keep-alive>
  <component>
    <!-- 该组件将被缓存! -->
  </component>
</keep-alive>
  • include - 字符串或正则表达,只有匹配的组件会被缓存
  • exclude - 字符串或正则表达式,任何匹配的组件都不会被缓存
    // 组件 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

    •  

posted @ 2019-10-20 11:08  前端伪大叔  阅读(5011)  评论(0编辑  收藏  举报