vue 切换路由 不能重复请求接口的问题

Vue 项目中，左侧是导航，右侧是内容组件。在第一次进入导航路由1时，右侧内容组件调用接口1，切换别的导航路由2，再切换回 导航路由1 时发现接口1没有被再次调用。

以下是包裹右侧内容组件的代码：

<template>
  <layout>
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component
          :is="Component"
        />
      </keep-alive>
    </router-view>
  </layout>
</template>

在 <component :is="Component"> 标签中加上 key 属性就解决了这个问题。

通常 key 值绑定的是路由名。

完整修改代码如下：

<template>
  <layout>
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component
          :is="Component"
          :key="key"
        />
      </keep-alive>
    </router-view>
  </layout>
</template>

<script>
import Layout from './Layout/index.vue';
import { useRouter } from 'vue-router';
export default {
  name: 'Home',
  components: {
    Layout
  },
  computed: {
    key() {
      return useRouter().currentRoute.value;
    },
  },
};
</script>