Vue-Router中如何基于路由参数实现动态组件选择？

我有一个基础组件UserForm，其他组件（如AdministratorForm）通过嵌套方式对其扩展，代码示例如下：

// UserForm 基础组件
<template>
    <div class="user-form"></div>
</template>

// AdministratorForm 扩展组件
<template>
    <UserForm v-model="administrator">
        // 额外的表单字段
    </UserForm>
</template>

现在我想配置一条动态路由，根据路由参数userTyp加载对应的表单页面组件，当前的路由配置尝试如下：

{
   path: '/users/:userTyp/:programId',
   name: 'user-create',
   component: () => import('@/modules/users/forms/'+ userTyp+ 'FormPage.vue'),
   props: (route: any) => ({
       programId: route.params.programId
   })
}

请问这种动态路由是否可以实现？如果可以，具体该怎么操作？

我使用的技术版本：

• "vue": "^2.6.11"
• "vue-router": "^3.2.0"

完全可以实现这种动态路由，你当前的配置问题在于userTyp变量无法直接在组件导入的箭头函数中获取路由参数，调整后即可正常工作，具体步骤如下：

1. 修正路由的动态组件导入逻辑 #

在vue-router 3.x中，component字段可以接收一个带route参数的工厂函数，通过这个参数就能拿到路由里的userTyp，进而动态拼接组件路径。修改后的路由配置如下：

{
  path: '/users/:userTyp/:programId',
  name: 'user-create',
  // 通过route参数获取userTyp，动态导入对应组件
  component: (route) => import(`@/modules/users/forms/${route.params.userTyp}FormPage.vue`),
  props: (route) => ({
    programId: route.params.programId
  })
}

可选：添加导入失败的兜底处理 #

如果担心传入的userTyp对应组件不存在，可以给动态导入加上错误捕获，兜底到404或提示组件：

component: (route) => import(`@/modules/users/forms/${route.params.userTyp}FormPage.vue`)
  .catch(() => import('@/components/NotFound.vue')) // 替换成你的兜底组件路径

2. 保证表单组件的一致性 #

所有xxxFormPage.vue组件（比如AdministratorFormPage.vue）要遵循统一的接口规范：

• 能正确接收programId props（路由已通过props传递该参数）
• 和基础组件UserForm的交互逻辑保持一致（比如支持v-model、相同的事件触发规则等）

3. 测试路由跳转 #

跳转路由时，正确传入userTyp和programId参数即可，示例代码：

// 命名路由跳转（推荐）
this.$router.push({
  name: 'user-create',
  params: {
    userTyp: 'administrator',
    programId: '1001'
  }
})

// 路径跳转
this.$router.push('/users/administrator/1001')

注意事项 #

• 确保@/modules/users/forms/目录下存在${userTyp}FormPage.vue对应的文件，比如userTyp传administrator时，必须有AdministratorFormPage.vue文件。
• webpack打包时，会把所有符合@/modules/users/forms/*FormPage.vue规则的文件打包成单独的异步chunk，如果目录下有不需要的文件，建议提前清理或通过webpack配置排除。

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