组合 API | Vue 路由参数未被监视

Question

我在watch和vue router的文档中有几乎相同的示例用于组合 API。但console.log即使route.params.gameId在模板中正确显示，也永远不会被触发

<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
const store = useStore()
const route = useRoute()

watch(
      () => route.params.gameId,
      async newId => {
        console.log("watch"+newId)
      }
    )
</script>

<template>
    <div>
        {{route.params.gameId}}
    </div>
</template>

我究竟做错了什么？我还尝试使 watch 函数成为非异步的，但它没有改变任何东西，稍后我将需要它来获取 api，所以它应该是异步的。

Answer 1

您应该immediate: true向手表添加选项：

watch(
      () => route.params.gameId,
      async newId => {
        console.log("watch"+newId)
      },
      { 
          immediate: true

      }
    )

因为手表不会在第一次渲染时运行，而参数仅在页面加载时更改一次，所以手表会错过该更改。