vue3 keep-alive 如何实现 相同组件 查询参数不同实现不同实例缓存？

Question

vue3 keep-alive 如何实现 相同组件 查询参数不同实现不同实例缓存？

例子1：
页面1：/article/123
页面2：/article/234

例子2：
页面1：/article/detail?id=132
页面2：/article/detail?id=324

实现两个不同的实例，修改页面数据时互不干扰。

页面结构

<template>
  <router-view v-slot="{ Component, route }">
    <keep-alive :include="cachedViews">
      <component
        v-if="route.meta.keepAlive && cachedViews.includes(route.name)"
        :is="Component"
      />
    </keep-alive>
    <component
      v-if="!route.meta.keepAlive || !cachedViews.includes(route.name)"
      :is="Component"
    />
  </router-view>
</template>
<script>
import store from "@/store";
import { computed, watch, ref, onMounted } from "@vue/runtime-core";
export default {
  setup() {
    const cachedViews = computed(() => {
      return store.state.fixedTab.cachedViews;
    });

    return {
      cachedViews,
    };
  },
};
</script>