vue3 切换到相同路由不重新渲染

在 Vue 3 中，如果使用的是 Composition API 和 `<router-view>` 标签，切换到相同路由时默认会重新渲染组件。如果需要在切换到相同路由时不重新渲染组件，可以使用 `<router-view>` 标签的 `v-slot` 来实现。

具体做法是：在 `<router-view>` 标签上添加 `v-slot`，并在 `v-slot` 中使用 `keep-alive` 组件，例如：

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

这样在切换到相同路由时，`keep-alive` 组件会缓存当前组件，再次进入该路由时，直接从缓存中读取组件，避免了重新渲染。同时，也可以通过 `include` 和 `exclude` 属性来控制缓存哪些组件，不缓存哪些组件。

需要注意的是，Vue 3 中的 `keep-alive` 组件需要使用 `v-bind` 指令绑定 `include` 和 `exclude` 属性，例如：

<template>
  <div>
    <router-view v-slot="{ Component }">
      <keep-alive :include="includeComponents" :exclude="excludeComponents">
        <component :is="Component" />
      </keep-alive>
    </router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      includeComponents: ['ComponentA'],
      excludeComponents: ['ComponentB']
    }
  }
}
</script>

这里的 `includeComponents` 和 `excludeComponents` 是数组，分别表示需要缓存的组件和不需要缓存的组件。