命名 Vue Router 路由：规则和 Enum

Vue Router 路由命名最佳实践：大型项目中的优化组织方案

在实际的 Vue 应用中，当面对众多页面和团队协作开发时，Vue Router 文档中的简单示例往往会导致问题。依赖字符串路径会使重构变得复杂并引入错误。两条关键规则能让路由更加健壮：强制为每个路由使用 name 属性，并将名称集中存储在枚举或常量对象中。

这种做法将导航逻辑与 URL 结构解耦，简化了变更并最大程度减少了错误。

强制使用 name：实现与路径的独立性

通过 path 进行跳转会紧密地将代码绑定到当前的 URL 结构。文档中的示例：

const routes = [
  {
    path: '/user/:username',
    component: User,
  }
]

导航 router.push('/user/basov') 在路径更改为 /profile/:username 时会失效。使用 name 则可以解决此问题：

router.push({ name: 'profile', params: { username: 'john' } })

路由器本身会替换当前的路径。这对于 <router-link> 至关重要，因为如果没有 name，重构就需要在整个项目中到处修改。

将名称集中存储在枚举或对象中

硬编码字符串如 'profile' 会导致拼写错误、重复以及难以重构。应将名称提取到单独的模块中。

TypeScript 枚举：

export enum RouteNames {
  Profile = 'profile',
  Dashboard = 'dashboard',
  Settings = 'settings',
}

JavaScript 对象：

export const RouteNames = {
  UserList: 'user-list',
  UserSettings: 'user-settings',
  UserProfile: 'user-profile',
} as const;

使用方式：

router.push({ name: RouteNames.Profile, params: { username: 'john' } });
<router-link :to="{ name: RouteNames.UserList }">用户列表</router-link>;

IDE 将提供自动补全，TypeScript 会在编译时进行类型检查。

方法对比与示例

不遵循规则：

// 组件 A
router.push('/user/list');

// 组件 B
<router-link to="/user/settings">设置</router-link>;

// 组件 C
if (route.path === '/user/profile') { /* ... */ }

将 /user/list 更改为 /users/all 需要进行全局字符串搜索。像 /User/List 这样的拼写错误直到运行时才会被发现。

遵循规则：

// routes/names.ts
export const RouteNames = {
  UserList: 'user-list',
  UserSettings: 'user-settings',
  UserProfile: 'user-profile',
} as const;

// routes/index.ts
{ path: '/users/all', name: RouteNames.UserList, component: UserList },

重构时：只需更改 path，name 保持不变。所有跳转都正常工作，拼写错误被消除。

| 方面 | 不遵循规则 | 遵循规则 |

|--------|------------|-------------|

| 名称位置 | 分散在项目中 | 集中存储 |

| 路径重构 | 全局字符串搜索 | 一处修改 |

| 拼写错误 | 运行时发现 | 编译时发现 |

| 路由概览 | 困难 | 一目了然 |

生产环境优势

• 可扩展性： 在拥有 50 条以上路由的项目中，集中化的名称简化了新开发者的上手过程。
• 代码审查： 通过枚举轻松检查导航。
• 测试： 通过名称而非路径来模拟路由。

从项目一开始就应用这些规则：

• 为每个路由分配一个 name。
• 将名称存储在枚举/对象中。
• 在 router.push 和 <router-link> 中仅使用命名导航。

核心要点

• name 能在重构 URL 结构时防止破坏性变更。
• 枚举/常量消除了拼写错误并确保自动补全。
• 集中化简化了路由审计和维护。
• 该方法适用于 JS/TS，与 Vue 3 Router 兼容。
• 在大型团队中节省调试时间。

— Editorial Team