问题：

相同path不同参数的路由跳转后，由于是相同的组件实例，因此将被重复使用，这意味着组件的生命周期钩子不会被调用。因此不会再次调用接口，同理从跳转后的页面返回上一页也不会触发生命周期钩子。

解决：

方法1：非KeepAlive组件中

使用 beforeRouteUpdate 导航守卫，在to参数中获取页面参数调用接口即可，它还允许你取消导航： 

<script setup>
import { onBeforeRouteUpdate } from 'vue-router'
// ...
// 路由再次变化触发
onBeforeRouteUpdate((to) => {
  fetchData(to.query.id)
})
// 初次进入调用
fetchData(router.currentRoute.value.query.id)
</script>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
方法2：KeepAlive组件中
<script setup>
import { watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

// 路由参数变化
watch(() => route.query.id, (newId, oldId) => {
  fetchData(to.query.id)
})
// 初次进入调用
fetchData(router.currentRoute.value.query.id)
</script>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.

注意事项

由于此情况下组件的生命周期钩子不会被调用，因此setup的数据不会被初始化，因此需要手动重置数据

onBeforeRouteUpdate((to) => {
  // 例如
  state.tabActive = 0
  tabList.value = []
  fetchData(to.query.id)
})
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.