命名路由

命名路由是指在定义路由时给每个路由配置一个 name 属性，用于代替路径（path）来进行导航。

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

<router-link :to="{ name: 'user', params: { username: 'erina' } }">
  用户主页
</router-link>

router.push({ name: 'user', params: { username: 'erina' } })

注意事项

1. 命名路由中如果定义了参数（如 /user/:id），则必须在导航时提供 params：

router.push({ name: 'user', params: { id: 1 } })

2. 如果没有传入 params，Vue Router 会：

• 尝试使用当前路由的 params（如果当前路由也有同名参数）。
• 如果当前路由没有该参数，则导航会失败，控制台会报出警告（例如：Missing required param "id"）。

3. 如果路由没有动态参数（:param），则可以省略 params。

优势

优点	说明
✅ 避免硬编码路径	修改路径时无需全局替换，只改 name 即可
✅ 自动编码 params	自动进行 URL 编解码
✅ 减少拼写错误	避免字符串路径的 typo
✅ 跳过路径排序	直接匹配 name，无需考虑路由定义顺序

const routes = [
  { path: '/user/:id', component: UserDetail },
  { path: '/user/profile', component: UserProfile },
]

有多条路由路径可能匹配相同的 URL 时（比如 /user/:id 和 /user/profile），Vue Router 会按照**“路径的具体程度”**来排序匹配优先级。

如果用户访问 /user/profile，这两个路径都能匹配。 Vue Router 会根据内部算法优先选择更具体的路径，也就是 /user/profile。

使用命名路由就可以避免此类问题