Vue Router 路由管理如何使用命名路由 named routes 简化跳转

命名路由是提升路由跳转安全性与可维护性的核心实践，通过唯一字符串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 }

];

1. name 不必和 path 完全一致，但建议语义清晰，比如 user-detail 比 user 更明确
2. 带动态参数的路由（如 :id）同样支持命名，后续传参方式会更统一
3. 不建议给重定向或通配路由（*）设 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>

1. params 是必须的，用于填充路径中的动态段（如 :id），不能写成 query
2. 如果路由没有参数，可省略 params：{ name: 'home' }
3. 搭配 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 } });

1. 相比 $router.push('/user/' + id)，这里不会因路径格式变化（如改成 /u/:id）而报错
2. params 会自动拼进 URL，无需手动拼接；query 参数可额外添加：{ name: 'user-detail', params: { id: 5 }, query: { tab: 'posts' } }
3. 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();

}

});

1. 路径可能被重定向或别名覆盖，但 name 始终不变，判断更精准
2. Vue Devtools 的路由面板中，name 显示在每条记录里，排查跳转链路一目了然
3. 单元测试中模拟跳转也更简洁，比如 router.push({ name: 'home' }) 无需构造路径