动态路由参数怎么取不到？明明路径是对的啊

树泽 Dev 提问于 2026-03-01 14:57:18 阅读 17

前端

我用 Vue Router 做了个动态路由，比如 /user/:id，想在组件里拿到 id 参数。但 this.$route.params.id 一直是 undefined，控制台也报错说 Cannot read property ‘id’ of undefined。我已经确认路由配置没问题，页面也能正常跳转过去。

下面是我的路由配置和组件里取参数的代码：

const routes = [
  { path: '/user/:id', component: UserDetail }
]

// 在 UserDetail 组件中
export default {
  mounted() {
    console.log(this.$route.params.id) // 输出 undefined
  }
}

我来解答赞 6 收藏

反馈

1 条解答

司马康平 Lv1

路由没注册吧，this.$route 取不到说明 Vue Router 根本没挂载上。检查下 main.js 里有没有 app.use(router)。

// main.js

import { createApp } from 'vue'

import App from './App.vue'

import router from './router'



const app = createApp(App)

app.use(router)  // 这行别漏了

app.mount('#app')

另外确保组件是在 <router-view> 里面渲染的，别直接当普通组件用。我一般直接在 mounted 里打印 this.$route 看看有没有东西，没有就是没注册上。

2026-03-01 15:01