VueJS：如何在组件中获取路由参数

我来帮你搞定这个困扰！你已经配置了带动态参数的路由，但用props拿不到:id，主要是路由配置里缺了关键的props开启项，再配合组件正确接收props就可以解决了，一步步来：

1. 修改路由配置，开启props传递 #

你的现有路由只定义了路径和组件，需要给Entry路由加上props: true，这样路由的动态参数会自动转为组件的props：

export default new Router({
  routes: [{
    path: '/entry/:id',
    name: 'Entry',
    component: Entry,
    props: true // 核心：开启后路由参数会作为props传给组件
  }]
})

如果需要更灵活的配置（比如部分参数通过props传递，部分自定义），也可以用函数形式的props，但你这个场景用true就足够了。

2. 在Entry组件中接收props #

根据你使用的Vue版本，正确声明接收id这个prop：

Vue 2 选项式API #

export default {
  // 基础写法
  props: ['id'],
  // 更严谨的写法（推荐，做类型校验）
  // props: {
  //   id: {
  //     type: String, // 如果id是数字就写Number
  //     required: true
  //   }
  // },
  mounted() {
    console.log('拿到的路由参数id:', this.id);
  }
}

Vue 3 组合式API（