VUE路由name的用法详解
作者：不穿铠甲的穿山甲
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）——为多个 <router-view> 渲染不同组件
这是 name 最核心也是最官方推荐的用途之一。
场景说明：
如果你在一个页面中有多个 <router-view>，你可以通过给路由配置 name，来指定每个视图应该渲染哪个组件。
示例代码：
<template>
<div id="app">
<!-- 默认视图 -->
<router-view></router-view>
<!-- 命名视图 -->
<router-view name="Hello"></router-view> <!-- 显示 name 为 'Hello' 的路由组件 -->
<router-view name="text"></router-view> <!-- 显示 name 为 'text' 的路由组件 -->
</div>
</template>对应的路由配置：
routes: [
{
path: '/',
components: {
default: DefaultComponent,
Hello: Hello,
text: Text
}
}
]📌 注意：
- 如果你没有给路由设置
name，那么该组件只能作为默认视图 (default) 渲染。 - 要想渲染到命名视图中，必须定义
name并在components字段中引用它。
✅ 二、获取当前路由名称 —— $route.name
你可以通过 $route.name 获取当前激活路由的 name 值，这在动态控制组件行为或埋点日志中很有用。
示例代码：
<template>
<div id="app">
<p>当前路由名称是：{{ $route.name }}</p>
<router-view></router-view>
</div>
</template>当访问 / 路径时，页面上将显示：
当前路由名称是：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） | ✅ 是 | 多个 <router-view> 时必须使用 |
| 获取当前路由名称 | ✅ 推荐 | 用于调试、埋点、逻辑判断等 |
params 传参 | ✅ 是 | 必须配合 name 使用，不能使用 path |
💡 建议
即使你暂时不需要使用上述功能，也建议为每个路由添加一个有意义的 name，这样可以提升项目的可维护性和扩展性。
如果你想了解 query 和 params 更详细的对比，或者如何实现带 name 的动态路由加载，也可以继续问我！
到此这篇关于VUE路由name的用法详解的文章就介绍到这了,更多相关vue 路由name内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！