没问题，这个需求完全可以实现！我来给你拆解几个实用的方案，帮你搞定动态路由加载分文件夹组件的问题：

首先得提个关键点：你原来的写法里直接在路由配置里用$route是行不通的——因为路由配置是在Vue实例创建前就定义好的，这时候$route还没生成呢！所以得换下面几种方式来实现：

这种方式是用一个“容器组件”来接收路由参数，然后动态加载对应的目标组件，逻辑清晰还方便处理异常：

1. 先写一个容器组件（比如DynamicComponentContainer.vue）：

<template>
  <!-- 用Vue的动态组件渲染目标组件，同时传递所有属性 -->
  <component :is="targetComponent" v-bind="$attrs" />
</template>

<script>
export default {
  props: ['typeOfComponent'],
  data() {
    return {
      targetComponent: null
    }
  },
  async created() {
    try {
      // 根据传入的组件类型动态导入对应的组件
      const componentModule = await import(`../components/${this.typeOfComponent}/component1.vue`)
      this.targetComponent = componentModule.default
    } catch (err) {
      // 万一组件不存在，这里可以加载一个默认的错误提示组件
      console.error('组件加载失败:', err)
      this.targetComponent = () => import('../components/default/NotFound.vue')
    }
  }
}
</script>

2. 然后在路由配置里指向这个容器组件，同时开启props把路由参数转成组件属性：

{
  path: '/component1/:typeOfComponent/:param',
  props: true, // 自动把路由params转为组件的props
  component: () => import('./DynamicComponentContainer.vue')
}

Vue Router允许在component的工厂函数里直接拿到当前路由对象route，你可以用它来拼接组件路径：

{
  path: '/component1/:typeOfComponent/:param',
  // 这里的route参数就是当前路由对象，直接拿params来拼接路径
  component: (route) => import(`./components/${route.params.typeOfComponent}/component1.vue`)
}

小提醒：这种写法要确保你的构建工具（Webpack/Vite）支持动态路径拼接——只要路径有固定前缀（比如./components/），一般都能正确识别并打包对应的组件。如果遇到打包报错，可以试试后面的方案三。

如果你担心动态导入的打包问题，可以提前把所有component1.vue组件注册到一个映射表里，然后直接通过路由参数匹配：

1. 先写一个组件注册文件（比如componentRegistry.js）：

const componentMap = {}
// 用require.context自动遍历components下所有component1.vue文件
const requireComponent = require.context('./components', true, /component1\.vue$/)

requireComponent.keys().forEach(filePath => {
  // 从文件路径里提取文件夹名称，比如'./folder1/component1.vue'提取出'folder1'
  const folderName = filePath.split('/')[1]
  const component = requireComponent(filePath).default
  componentMap[folderName] = component
})

export default componentMap

2. 然后在路由配置里直接用这个映射表：

import componentMap from './componentRegistry.js'

{
  path: '/component1/:typeOfComponent/:param',
  component: (route) => {
    // 从映射表取组件，不存在就返回默认组件
    return componentMap[route.params.typeOfComponent] || () => import('./components/default/NotFound.vue')
  }
}

最后再给你几个小提示：

• 一定要处理组件不存在的情况，避免页面直接崩溃；
• 如果用Vite，动态导入的路径要符合它的规范，尽量保留固定前缀；
• 要是需要把param参数传给目标组件，要么开启props: true，要么在容器组件里用$route.params.param手动传递。

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