在Vue开发中，Vue-Router是实现单页面应用路由功能的重要工具。当涉及到在子组件中使用路由参数时，掌握正确的方法对于构建高效、灵活的应用至关重要。

我们需要在路由配置中定义参数。在Vue-Router的配置文件（通常是router.js）里，我们可以这样设置：

const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: () => import('@/views/User.vue')
  }
];

这里，我们在路径中使用了:id来定义一个参数。当用户访问/user/123这样的路径时，123就会作为参数id的值。

接下来，在子组件中获取参数。在子组件（如User.vue）中，有几种方式可以获取这个参数。

一种常见的方法是通过$route对象。在组件的模板、计算属性或方法中，都可以使用this.$route.params.id来获取参数值。例如：

<template>
  <div>
    <p>用户ID: {{ $route.params.id }}</p>
  </div>
</template>

<script>
export default {
  name: 'User',
  mounted() {
    console.log(this.$route.params.id);
  }
};
</script>

这种方式简单直接，但在计算属性或方法中频繁使用$route会使组件与路由耦合度较高。

另一种更好的方式是通过props来接收参数。在路由配置中，我们可以添加props选项：

const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: () => import('@/views/User.vue'),
    props: true
  }
];

然后在子组件中定义props：

<template>
  <div>
    <p>用户ID: {{ id }}</p>
  </div>
</template>

<script>
export default {
  name: 'User',
  props: ['id'],
  mounted() {
    console.log(this.id);
  }
};
</script>

这样做的好处是，组件可以更清晰地声明它所依赖的外部数据，降低了与路由的耦合度，提高了组件的可测试性和可维护性。

在Vue与Vue-Router的项目中，合理使用子组件中的路由参数，能够让我们的代码结构更加清晰，应用逻辑更加流畅，为构建大型、复杂的单页面应用打下坚实的基础。