Vue3中使用Vue Router链接时保持路由组件状态不重置

当用Vue Router切换路由时，默认会销毁旧组件、创建新组件，导致组件状态被重置。要保留状态，核心是用Vue的<keep-alive>组件缓存路由视图。

基础用法：缓存所有路由组件 #

直接用<keep-alive>包裹<router-view>，所有路由渲染的组件都会被缓存，切换时不会重置状态：

<div>
  <div id="titleControl">
    <router-link :to="{ name: 'controls' }" class="tablink borderLink">
      Controls
    </router-link>
    <router-link :to="{ name: 'logs' }" class="tablink borderLink">
      Logs
    </router-link>
  </div>

  <!-- 包裹后缓存路由组件 -->
  <keep-alive>
    <router-view />
  </keep-alive>
</div>

进阶：只缓存指定组件 #

如果不需要缓存所有路由组件，可通过include属性指定目标组件（需匹配组件的name选项）：

1. 给目标组件设置name #

// Controls.vue
export default {
  name: 'Controls', // 名称要和include里的一致
  // ...组件逻辑
}

// Logs.vue
export default {
  name: 'Logs',
  // ...组件逻辑
}

2. 在<keep-alive>中指定include #

<keep-alive include="Controls,Logs">
  <router-view />
</keep-alive>

也支持数组动态绑定：

<keep-alive :include="['Controls', 'Logs']">
  <router-view />
</keep-alive>

缓存组件的生命周期处理 #

缓存后的组件不会重复触发created、mounted等钩子，若需在组件激活/失活时执行逻辑，用activated和deactivated钩子：

Options API写法 #

export default {
  activated() {
    // 组件被激活时执行（比如刷新数据）
  },
  deactivated() {
    // 组件失活时执行（比如清理定时器）
  }
}

Composition API写法 #

import { onActivated, onDeactivated } from 'vue'

export default {
  setup() {
    onActivated(() => {
      // 激活时逻辑
    })

    onDeactivated(() => {
      // 失活时逻辑
    })
  }
}

内容的提问来源于stack exchange，提问作者Bilal