命名路由是提升路由跳转安全性与可维护性的核心实践，通过唯一字符串name替代硬编码路径，支持声明式与编程式跳转、动态参数传递、路由守卫精准判断及调试优化。
命名路由不是锦上添花的功能，而是让路由跳转更安全、更易维护的核心实践。它用一个名字代替硬编码的路径字符串，避免拼写错误、路径变更时四处修改的问题。
定义命名路由：在 routes 配置里加 name 字段
每个路由对象都可以添加 name 属性，值为字符串，全局唯一即可：
// router/index.js
const routes = [
{ path: '/home', name: 'home', component: Home },
{ path: '/user/:id', name: 'user-detail', component: UserDetail },
{ path: '/product/:sku', name: 'product-page', component: ProductPage }
];
- name 不必和 path 完全一致，但建议语义清晰，比如
user-detail比user更明确 - 带动态参数的路由（如
:id）同样支持命名，后续传参方式会更统一 - 不建议给重定向或通配路由（
*）设 name，它们通常不参与主动跳转
声明式跳转：用 <router-link> 绑定 name 对象
替换原来的字符串 to="/user/123"，改用对象语法：
<router-link :to="{ name: 'user-detail', params: { id: 123 } }">用户页</router-link>
<router-link :to="{ name: 'product-page', params: { sku: 'PRO-001' } }">商品详情</router-link>
当代理已经知道网站路由或内容URL，并且在启动前需要有效的sitemap XML、sitemap索引或robots.txt引用时，请使用sitemap。这是一个发布构件技能，而不是爬虫或SEO平台。
- params 是必须的，用于填充路径中的动态段（如
:id），不能写成 query - 如果路由没有参数，可省略 params：
{ name: 'home' } - 搭配
active-class或exact-active-class仍可正常使用
编程式跳转：用 $router.push({ name, params }) 替代字符串路径
在 methods 或组合式 API 的 setup 中，推荐这样写：
立即学习“前端免费学习笔记（深入）”；
// Vue 2 写法
this.$router.push({ name: 'user-detail', params: { id: this.userId } });
// Vue 3 + Composition API
import { useRouter } from 'vue-router';
const router = useRouter();
router.push({ name: 'product-page', params: { sku: skuValue } });
- 相比
$router.push('/user/' + id)，这里不会因路径格式变化（如改成/u/:id）而报错 - params 会自动拼进 URL，无需手动拼接；query 参数可额外添加：
{ name: 'user-detail', params: { id: 5 }, query: { tab: 'posts' } } - replace 和 go 方法同样支持命名路由对象，逻辑一致
配合路由守卫与调试：name 更易识别和拦截
在 beforeEach 等导航守卫中，to.name 比 to.path 更稳定可靠：
router.beforeEach((to, from, next) => {
if (to.name === 'user-detail' && !isLogin()) {
next({ name: 'login', query: { redirect: to.fullPath } });
} else {
next();
}
});
- 路径可能被重定向或别名覆盖，但 name 始终不变，判断更精准
- Vue Devtools 的路由面板中，name 显示在每条记录里，排查跳转链路一目了然
- 单元测试中模拟跳转也更简洁，比如
router.push({ name: 'home' })无需构造路径
