vue 页面缓存

最新推荐文章于 2024-07-23 08:58:45 发布

lijj_html5

最新推荐文章于 2024-07-23 08:58:45 发布

阅读量3.1k

点赞数 1

文章标签： vue 缓存组件

本文链接：https://blog.csdn.net/lijj_html5/article/details/78793158

版权

vue2.0提供了一个keep-alive组件

用来缓存组件,避免多次加载相应的组件,减少性能消耗

<keep-alive>
<component>
  <!-- 组件将被缓存 -->
</component>
</keep-alive>

// 这是目前用的比较多的方式
<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
  routes: [
    { path: '/', redirect: '/index',  component: Index, meta: { keepAlive: true }},
    {
      path: '/common',
      component: TestParent,
      children: [
        { path: '/test2', component: Test2, meta: { keepAlive: true } } 
      ]
    }
    ....
    // 表示index和test2都使用keep-alive