vue3 keep-alive有很多个页面，如果页面A跳到页面B，页面B点击按钮1回到页面A，页面A内容保持不变；页面B点击按钮2回到页面A，页面A重新渲染页面；如果页面B跳到其他页面再到页面A，页面A重新渲染页面，完整组合式代码怎么写

Vue 3中，`<keep-alive>` 组件用于保持组件状态或避免重新渲染。`<keep-alive>` 可以包裹动态组件，使得被包含的组件保持状态，而不是每次切换时重新创建。在您的需求中，页面A在两种不同的情况下需要有不同的行为，这可以通过使用`<keep-alive>`的`include`和`exclude`属性或者借助`activated`和`deactivated`生命周期钩子来实现。

下面是一个简单的示例，来说明如何使用`<keep-alive>`来根据不同的情况控制页面A的重新渲染：

<template>
  <div>
    <!-- 使用include和exclude属性控制keep-alive的包含或排除 -->
    <keep-alive include="pageA">
      <component :is="currentComponent"></component>
    </keep-alive>
    <!-- 页面A的按钮，用于触发不同的行为 -->
    <button @click="goBackToPageA">回到页面A（保持状态）</button>
    <button @click="goBackToPageANew">回到页面A（重新渲染）</button>
  </div>
</template>

<script>
export default {
  components: {
    pageA: { template: '<div>页面A的内容</div>' },
    pageB: { template: '<div>页面B的内容</div>' },
    // ... 其他页面组件
  },
  data() {
    return {
      currentComponent: 'pageB',
    };
  },
  methods: {
    goBackToPageA() {
      this.currentComponent = 'pageA';
    },
    goBackToPageANew() {
      // 清除当前组件缓存，使页面A重新渲染
      // 可以通过一个变量来控制组件的切换
      this.$nextTick(() => {
        this.$refs.keepAlive组件.cache = null;
      });
      this.currentComponent = 'pageA';
    },
  },
};
</script>

在这个例子中，`<keep-alive>` 使用了`include`属性来指定只有名为`pageA`的组件被缓存。当需要页面A保持状态时，使用`goBackToPageA`方法切换组件即可。如果需要页面A重新渲染，可以使用`goBackToPageANew`方法，这里通过直接操作`$refs.keepAlive组件.cache`来清除缓存（注意这需要`<keep-alive>`有一个ref引用），然后再次切换到页面A。

请注意，这个例子是基于一些假设和简化编写的，具体实现可能需要根据您的应用结构和具体需求进行调整。例如，如果需要精确控制`<keep-alive>`缓存的清除，可能需要更复杂的逻辑来管理组件的key值或者缓存状态。