Vue.js能否像Asp.net MVC一样配置默认路由自动映射组件？

Vue Router 没有内置和 ASP.NET MVC 一模一样的开箱即用约定式路由，但完全可以实现「无需逐个提前注册路由和组件、跳转时自动匹配对应页面」的需求，不需要把所有路由都显式传入createRouter注册。

实现逻辑 #

核心思路和 ASP.NET MVC 的约定匹配逻辑一致：先定义统一的路由段规则，再根据路由参数动态加载对应位置的组件，靠构建工具的动态导入能力完成组件的异步加载，不需要提前手动import所有页面组件。

可直接用的配置示例 #

下面的配置完全对齐你贴的MVC默认路由规则，默认首页对应Dashboard控制器下的Home动作，其余路由按照{controller}/{action}/{id}的规则自动匹配src/views目录下的Vue组件：

import { createRouter, createWebHistory } from "vue-router";

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 默认首页配置，对应MVC里的defaults规则
    {
      path: "/",
      component: () => import("@/views/Dashboard/Home.vue")
    },
    // 通配匹配所有其余路由
    {
      path: "/:controller/:action?/:id?",
      // 根据路由参数动态加载对应组件
      component: (route) => {
        const controller = route.params.controller || "Dashboard";
        const action = route.params.action || "Home";
        // 匹配对应路径的组件，匹配失败返回404页面
        return import(`@/views/${controller}/${action}.vue`)
          .catch(() => import("@/views/NotFound.vue"));
      },
      props: true // 自动把id等路由参数传给组件，对应MVC的参数绑定
    }
  ]
});

export default router;

匹配规则说明 #

• 访问根路径/时，自动加载src/views/Dashboard/Home.vue
• 访问/Post/Detail/123时，自动加载src/views/Post/Detail.vue，同时将id:123作为props传入组件，不需要提前为这个页面单独写路由配置
• 如果访问的路径找不到对应组件，自动加载404页面，不会抛出全局错误

注意点 #

• 这套方案要求你的页面组件按照统一规则存放，和MVC要求控制器放在指定命名空间、方法名对应路由段的约束逻辑一致
• 如果使用Vite作为构建工具，动态导入的路径前缀（比如示例里的@/views/）必须是静态写死的字符串，不能完全动态拼接，否则Vite无法扫描到需要编译的文件
• 如果需要嵌套路由、路由meta自动生成这类更复杂的能力，可以直接用文件系统路由方案，本质就是上述逻辑的工程化封装，同样不需要手动维护路由配置数组。

内容的提问来源于stack exchange，提问作者Mohamad Hasan Salmaaniyaan