router-view缓存页面关闭

要在 Vue.js 中实现 `router-view` 缓存页面关闭的功能，可以使用 Vue Router 提供的 `keep-alive` 组件。这个组件可以将被包裹的组件缓存起来，以便在组件切换时保留其状态。

首先，在使用 `router-view` 的父组件中，将 `router-view` 包裹在 `keep-alive` 组件中，如下所示：

<template>
  <div>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

然后，在需要缓存的子组件中，可以通过 `activated` 和 `deactivated` 钩子函数来处理组件的激活和失活事件。在组件激活时，可以执行一些逻辑以恢复组件的状态；在组件失活时，可以执行一些逻辑以保存组件的状态。

export default {
  activated() {
    // 恢复组件状态的逻辑
  },
  deactivated() {
    // 保存组件状态的逻辑
  },
};

通过这种方式，每次切换到被缓存的页面时，Vue Router 会自动激活该组件并恢复其状态；当切换到其他页面时，会自动失活该组件并保存其状态。这样可以实现页面在关闭后仍保留状态的效果。

相关问题

router-view缓存

router-view 是 Vue Router 提供的用于渲染路由组件的组件。在默认情况下，每次切换到一个新的路由时，router-view 会销毁旧的组件并创建新的组件。这样可以确保每次路由切换都能获取最新的数据。然而，在某些情况下，我们可能希望保留之前渲染的组件，而不是每次都重新创建。

为了实现组件的缓存，可以使用 Vue Router 的 keep-alive 组件包裹 router-view。keep-alive 是 Vue 内置的一个抽象组件，可以缓存动态组件。

下面是一个示例:

<keep-alive>
  <router-view></router-view>
</keep-alive>

通过将 router-view 包裹在 keep-alive 组件中，被包裹的组件将会被缓存。当切换到该路由时，如果之前缓存过该组件，则会直接使用缓存中的组件，而不是重新创建。

需要注意的是，被缓存的组件会保留它们的状态，因此在使用缓存时要小心处理组件内部的状态和数据。

除了使用全局的 keep-alive，也可以在单个路由配置中使用 meta 字段来指定是否需要缓存该路由对应的组件。例如：

const routes = [
  {
    path: '/example',
    component: ExampleComponent,
    meta: {
      keepAlive: true // 需要缓存该组件
    }
  },
  // ...
]

然后，在路由配置中使用 meta 字段来判断是否需要缓存该组件：

beforeRouteEnter(to, from, next) {
  if (to.meta.keepAlive) {
    // 组件需要缓存，可以通过 next(vm => {}) 来访问组件实例
  }
  next();
}

这样可以更细粒度地控制组件的缓存行为。

router-view 缓存

`router-view` 是 Vue.js 中的一个内置组件，它负责渲染路由对应的组件。当 `router-view` 被启用缓存时，如果当前路由未发生改变，Vue 会复用之前已渲染的该组件实例，而不是每次都创建一个新的实例，这可以大大提高应用性能，特别是在数据量大或者页面跳转频繁的情况下。

Vue 提供了两个选项来配置 `router-view` 的缓存策略：
1. **`cache-size`**：这是一个可选的数字属性，用于设置缓存的最大大小，默认值为 5。当缓存超过这个大小时，最旧的组件会被移除，新的组件才会替换进来。
2. **`keep-alive`**：这是个全局选项，可以在 Vue 实例的 `options` 对象中配置。通过将 `keep-alive` 设置为一个包含选项的对象，可以直接控制哪些组件应该被缓存。

// 在根组件上配置 keep-alive
new Vue({
  router,
  components: {
    App: () => import('./App.vue'),
  },
  options: {
    keepAlive: true, // 默认就是开启缓存
    keepAlive: { // 或者更具体的配置
      include: ['YourComponentName'], // 只缓存指定名称的组件
      max: 3, // 最大缓存实例数
      metaKey: 'isCacheable', // 使用组件自身的某个 key 来判断是否缓存
    }
  },
})