vue3 useRoute无法获取get参数的问题解决

npm install vue-router@next

import { createRouter, createWebHistory } from 'vue-router'
import HelloWorld from '../components/HelloWorld.vue';
const routes = [
{ path: '/', component: HelloWorld },
]
const router = createRouter({
history: createWebHistory(),
routes,
})
export default router

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')

<script setup lang="ts">
import { watch } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
watch(() => route.query, (newQuery) => {
console.log('query', newQuery)
}, { immediate: true });
</script>

const canInput = ref(false) // 是否可以输入参数

watch(() => route.query, (newQuery) => {
  console.log('query', newQuery)
  // 使用可选链操作符安全访问 canInput
  if (typeof newQuery?.canInput === 'string') {
  	// 将 string 类型断言为 number
 	 canInput.value = Number(newQuery.canInput) === 1;
  } else {
  	canInput.value = false;
  }
}, { immediate: true });