【Vue】Vue Router4x关于router-view，transtion，keepalive嵌套写法报错

mosen8682025-10-16 20:47

警告问题

该警告是 Vue Router 4.x 的新规范，我们不能直接把 <router-view /> 放在 <keep-alive> 里。需要用 slot 语法包裹。

版本区别

VueRouter3

过去在 Vue 2 + Vue Router 3 中，我们可以直接这样写:

html 复制代码

<template>
  <div class="app-container">
      <keep-alive>
  			 <router-view/>
      </keep-alive>
  </div>
</template>

VueRouter4

但在 Vue Router 4 中，这样写会报错或者无效，因为 <router-view> 不再直接渲染组件，而是通过插槽 (v-slot) 暴露出一个 Component（以及 route）来渲染。将 App.vue 的模板部分修改为如下：

html 复制代码

<template>
  <div class="app-container">
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>
  </div>
</template>

这样写就不会有警告，并且 keep-alive 能正常缓存页面。已将 <router-view /> 按官方推荐写法用 slot 语法和 <keep-alive> 包裹，警告会消失，页面缓存也能正常工作。所以无需再担心该警告。

🧩 可选：如果你只想缓存部分路由

比如只缓存某几个页面，可以配合 include：

html 复制代码

<router-view v-slot="{ Component }">
  <keep-alive include="Home,About">
    <component :is="Component" />
  </keep-alive>
</router-view>

注意：include 的值对应的是组件的 name 属性，而不是路由名。

⚙️ 进一步说明

<router-view> 现在是一个插槽组件，通过 v-slot 暴露 { Component, route }。

这样做的好处是更灵活，你可以对路由组件进行过渡动画、缓存控制、条件渲染等操作：

html 复制代码

<router-view v-slot="{ Component, route }">
  <transition name="fade" mode="out-in">
    <keep-alive>
      <component :is="Component" :key="route.fullPath" />
    </keep-alive>
  </transition>
</router-view>