vue3 路由缓存

// Vue 3 路由缓存示例代码

// 引入 Vue 和 Vue Router
import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import App from './App.vue';

// 定义组件
const Home = { template: '<div>Home</div>' };
const About = { 
  template: '<div>About - <button @click="updateMessage">Update Message</button></div>',
  data() {
    return {
      message: 'Initial message'
    };
  },
  methods: {
    updateMessage() {
      this.message = 'Updated message';
      console.log(this.message);
    }
  },
  activated() {
    console.log('Component is activated');
  },
  deactivated() {
    console.log('Component is deactivated');
  }
};

// 创建路由实例
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About, meta: { keepAlive: true } }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

// 创建应用实例并挂载
const app = createApp(App);

// 使用 keep-alive 包裹 <router-view>
app.component('keep-alive', {
  props: {
    include: String,
    exclude: String
  },
  render() {
    const route = this.$route;
    const cache = this.$options.cache;

    if (route.meta.keepAlive) {
      return <keep-alive>{this.$slots.default()}</keep-alive>;
    } else {
      return this.$slots.default();
    }
  }
});

app.use(router).mount('#app');

// 在 App.vue 中使用 <router-view>
// <template>
//   <router-view v-slot="{ Component }">
//     <keep-alive>
//       <component :is="Component" />
//     </keep-alive>
//   </router-view>
// </template>

解释说明：

1. 定义组件：我们定义了两个简单的组件 Home 和 About。About 组件包含一个按钮，点击后会更新消息，并且它有 activated 和 deactivated 生命周期钩子。
2. 创建路由实例：在路由配置中，我们将 About 组件的 meta 属性设置为 { keepAlive: true }，表示这个组件需要被缓存。
3. 使用 keep-alive 包裹 <router-view>：我们在应用实例中定义了一个自定义的 keep-alive 组件，用于包裹 <router-view>，从而实现路由缓存。
4. App.vue：在 App.vue 中，我们使用了带插槽的 <router-view>，并通过 v-slot 指令将 <router-view> 的内容传递给 keep-alive 组件。

这样，当用户在不同路由之间切换时，被标记为 keep-alive 的组件（如 About）的状态会被保存，不会重新加载或销毁。