Naming Vue Router Routes: Rules and Enum

Optimal Route Name Organization in Vue Router for Large-Scale Projects

In real-world Vue applications with numerous screens and team development, the simple examples from the Vue Router documentation lead to problems. Relying on string paths complicates refactoring and introduces bugs. Two key rules make routing robust: mandatory use of name for every route and centralized storage of names in an enum or constant object.

This decouples navigation logic from URL structure, simplifying changes and minimizing errors.

Mandatory Use of name: Independence from path

Transitions via path tightly bind code to the current URL structure. Example from the documentation:

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

Navigation router.push('/user/basov') will break if changed to /profile/:username. With name, this is resolved:

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

The router itself will substitute the current path. This is critical for <router-link>, where without name, refactoring requires edits throughout the entire project.

Centralizing Names in an Enum or Object

Hardcoding strings like 'profile' leads to typos, duplicates, and difficult refactoring. Extract names into a separate module.

TypeScript enum:

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

JavaScript object:

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

Usage:

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

The IDE will provide autocompletion, TypeScript — type checking at compile time.

Approach Comparison with Examples

Without rules:

// Component A
router.push('/user/list');

// Component B
<router-link to="/user/settings">Settings</router-link>;

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

Changing /user/list to /users/all requires a global string search. Typos like /User/List go unnoticed until runtime.

With rules:

// 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 },

Refactoring: you change only the path, the name remains. All transitions work, typos are eliminated.

| Aspect | Without Rules | With Rules |

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

| Name Location | Scattered across the project | Centralized |

| Path Refactoring | Global string search | Change in one place |

| Typos | Runtime | Compilation |

| Route Overview | Difficult | Visible immediately |

Production Benefits

• Scalability: In projects with 50+ routes, centralized names simplify onboarding new developers.
• Code review: Easy to check navigation via enum.
• Testing: Mock routes by name, not by path.

Apply the rules from the start of the project:

• Assign a name to every route.
• Store names in an enum/object.
• Use only named navigation in router.push and <router-link>.

Key Takeaways

• name protects against breakage when refactoring URL structure.
• Enum/constants eliminate typos and ensure autocompletion.
• Centralization simplifies routing audit and maintenance.
• The approach works in JS/TS, compatible with Vue 3 Router.
• Saves debugging time in large teams.

— Editorial Team