Vue3切换路由页面冲加载被keep-alive缓存的组件

当使用 `keep-alive` 缓存组件时，组件的状态会被保留，从而可以在切换路由时快速恢复组件的状态。如果您希望在切换路由时重新加载被缓存的组件，可以使用 `watch` 监听 `$route` 对象的变化，在路由变化时手动调用组件的 `activated` 和 `deactivated` 生命周期钩子函数。

下面是一个示例，演示如何在切换路由时重新加载被缓存的组件：

<template>
  <div>
    <h2>{{ title }}</h2>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      message: ''
    };
  },
  created() {
    console.log('created');
    this.loadContent();
  },
  activated() {
    console.log('activated');
    this.loadContent();
  },
  methods: {
    loadContent() {
      // 发送异步请求获取数据
      // 然后更新数据
      this.title = 'Title';
      this.message = 'Data loaded successfully';
    }
  },
  watch: {
    $route(to, from) {
      console.log('route changed');
      if (from.name === this.$route.name) {
        this.$nextTick(() => {
          this.$options.activated.forEach(hook => hook.call(this));
        });
      } else {
        this.$options.deactivated.forEach(hook => hook.call(this));
      }
    }
  }
};
</script>

在上面的示例中，组件在 `created` 钩子函数和 `activated` 钩子函数中加载数据，`watch` 监听 `$route` 变化，并在路由变化时手动调用组件的 `activated` 和 `deactivated` 生命周期钩子函数。注意，在调用生命周期钩子函数时，需要使用 `$options` 对象来访问它们。