Vue.js如何处理以/admin或/user开头的路由？

当然可以！Vue Router完全支持类似Laravel的路由前缀与命名分组，根本不用手动给每个路由加前缀。下面给你两种常用实现方式：

1. 嵌套路由（官方推荐方案） #

这是Vue Router原生支持的分组方式，和Laravel的路由分组逻辑最像，还能顺便实现布局复用（比如用户模块的统一导航栏）。

示例代码：

const routes = [
  {
    path: '/user', // 设置路由前缀
    name: 'User', // 设置命名空间前缀
    component: UserLayout, // 可选：用户模块的统一布局组件（比如侧边栏、导航栏）
    children: [
      // 子路由自动继承父路由的前缀和命名空间
      { path: '', name: 'index', component: UserList }, // 对应路径 /user，命名为 User.index
      { path: 'profile', name: 'profile', component: UserProfile }, // 对应路径 /user/profile，命名为 User.profile
      { path: 'settings', name: 'settings', component: UserSettings }, // 对应路径 /user/settings，命名为 User.settings
    ]
  }
]

• 子路由的path无需重复写前缀，会自动和父路由的path拼接；
• 命名路由会自动将父路由的name与子路由的name用.连接，和Laravel的命名风格完全一致。

2. 批量处理路由配置（无嵌套布局需求时使用） #

如果只是想给一组路由统一加前缀和命名前缀，不需要共享布局组件，可以手动写个简单的工具函数批量处理路由数组：

示例代码：

// 先定义一组不带前缀的基础路由
const userRoutes = [
  { path: '', name: 'index', component: UserList },
  { path: 'profile', name: 'profile', component: UserProfile },
  { path: 'settings', name: 'settings', component: UserSettings },
]

// 批量添加前缀和命名空间
const prefixedUserRoutes = userRoutes.map(route => ({
  ...route,
  path: `/user${route.path ? '/' + route.path : ''}`,
  name: route.name ? `User.${route.name}` : 'User'
}))

// 合并到总路由数组中
const routes = [
  ...prefixedUserRoutes,
  // 其他模块的路由...
]

这种方式更灵活，适合不需要嵌套布局的场景，同样能避免手动重复写前缀的麻烦。

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