[Vue Router warn]: ＜router-view＞ can no longer be used directly inside ＜transition＞ or ＜keep-alive＞

[Vue Router warn]: can no longer be used directly inside or .

之所以出现该警告，可能是由于router新版本的原因

假设你的路由文件如下：

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: { keepAlive: true } // true：需要被缓存
  }
  // 其他路由...
]

那么你可以尝试将组件修改成如下内容：

<template>
  <router-view v-slot="{ Component, route }">
    <keep-alive v-if="route.meta.keepAlive">
      <component :is="Component" />
    </keep-alive>
    <component v-else :is="Component" />
  </router-view>
</template>

其中 route.meta.keepAlive可以获取到路由元信息中的 keepAlive值，如果为 true则表示需要缓存，否则不缓存。