VUE_路由_name的用法

---

Vue Router 中 name 属性的作用详解

在使用 Vue Router 定义路由时，我们常常会看到如下结构：

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    },
    {
      path: '/text',
      name: 'text',
      component: text
    },
    {
      path: '/text/:id',
      component: param
    }
  ]
})

其中的 name 属性是可选的，不写它似乎也“没问题”，但其实它在某些场景中非常重要。下面我们来详细说明它的作用和典型用法。

---

✅ 一、命名视图（Named Views）——为多个 渲染不同组件

这是 name 最核心也是最官方推荐的用途之一。

场景说明：

如果你在一个页面中有多个 ，你可以通过给路由配置 name，来指定每个视图应该渲染哪个组件。

示例代码：

对应的路由配置：

routes: [
  {
    path: '/',
    components: {
      default: DefaultComponent,
      Hello: Hello,
      text: Text
    }
  }
]

注意：

• 如果你没有给路由设置 name，那么该组件只能作为默认视图 (default) 渲染。
• 要想渲染到命名视图中，必须定义 name 并在 components 字段中引用它。

---

✅ 二、获取当前路由名称 —— $route.name

你可以通过 $route.name 获取当前激活路由的 name 值，这在动态控制组件行为或埋点日志中很有用。

示例代码：

当访问 / 路径时，页面上将显示：

当前路由名称是：Hello

这种方式比 $route.path 更语义化，便于业务逻辑判断。

---

✅ 三、params 传参的必要条件 —— 必须通过 name 来跳转

Vue Router 提供了两种传参方式：query 和 params。

传参方式	是否需要 name	是否刷新页面保留参数
query	❌ 不强制	✅ 是
params	✅ 必须使用	❌ 否（刷新后丢失）

使用 name 配合 params 传参：

<router-link :to="{ name: 'register', params: { id: 10, name: 'lili' } }">
  注册
</router-link>

对应的路由配置：

{
  name: 'register',
  path: '/register/:id/:name',
  component: register
}

在目标组件中可以通过以下方式获取参数：

this.$route.params.id
this.$route.params.name

注意：

• 如果你不给路由设置 name，则无法使用 params 方式进行导航。
• params 参数不会保留在地址栏刷新后（除非你在 path 中显式声明了参数）。

---

总结：name 的三大主要用途

用途	是否必须	说明
命名视图（Named View）	✅ 是	多个 时必须使用
获取当前路由名称	✅ 推荐	用于调试、埋点、逻辑判断等
params 传参	✅ 是	必须配合 name 使用，不能使用 path

---

建议

即使你暂时不需要使用上述功能，也建议为每个路由添加一个有意义的 name，这样可以提升项目的可维护性和扩展性。

---

如果你想了解 query 和 params 更详细的对比，或者如何实现带 name 的动态路由加载，也可以继续问我！