Vue.js 3 Composition API获取vue-router 4路由参数失败求助

问题根源 #

你错误地使用了useRouter()获取路由实例，而路由参数实际存储在当前路由对象中，并非路由实例的params属性，这才导致了Cannot read properties of undefined (reading 'uid')的报错。另外router.isReady()返回的Promise resolve后是路由实例本身，不是布尔值，你的就绪判断逻辑也不成立。

正确实现方式 #

方案1：直接获取路由参数（组件挂载后一次性读取） #

import { onMounted } from 'vue'
import { useRoute } from 'vue-router'

setup () {
  const route = useRoute();

  onMounted(() => {
    const pid = route.params.uid;
    console.log(pid);
  })
}

方案2：监听路由参数变化（适配参数动态更新场景） #

如果组件挂载后路由参数可能发生变化（比如同一路由切换不同参数），可以用watch监听参数变化：

import { watch } from 'vue'
import { useRoute } from 'vue-router'

setup () {
  const route = useRoute();

  watch(() => route.params.uid, (newUid) => {
    console.log('更新后的uid:', newUid);
  }, { immediate: true }) // immediate设为true会在组件挂载时立即执行一次监听逻辑
}

关键区别说明 #

• useRouter()：获取路由实例，用于执行导航操作（如router.push()、router.replace()）
• useRoute()：获取当前活跃的路由对象，包含params、query、path等当前路由的核心信息

内容的提问来源于stack exchange，提问作者Myghty Draxx