vue keep-alive不生效

Question

// dataCenter/index.vue
<script>
export default {
  name: 'dataCenter'
}
</script>

// App.vue
<template>
  <div id="app">
    <keep-alive include="dataCenter">
      <router-view />
    </keep-alive>
  </div>
</template>


// router/index.vue
{
    path: '/dataCenter',
    component: Layout,
    children: [
      {
        path: '/dataCenter',
        name: 'dataCenter',
        component: () => import('@/views/dataCenter/index'),
        meta: { title: '', icon: 'icon-shujuku', keepAlive: true }
      }
    ]
  }

使用keepAlive也不生效

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

Answer 1

你这种路由写法，keepalive应该写在layout中，而不是app.vue中，访问的路径也是/datacenter/datacenter