VUE路由name的用法详解
更新时间：2025年05月17日 11:41:30 作者：不穿铠甲的穿山甲
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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue中声明式导航与编程式导航，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-11-11
这篇文章主要介绍了NUXT SSR初级入门笔记(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
在本篇内容里小编给大家整理了关于Vue用cmd创建项目的方法讲解，有兴趣的朋友们跟着学习下。2019-02-02
这篇文章主要介绍了VueJs打包之后遇到的坑及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要为大家详细介绍了vue使用swiper实现左右滑动切换图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
这篇文章主要介绍了vue 实现把路由单独分离出来，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
这篇文章主要介绍了vue 动态组件(component :is) 和 dom元素限制(is)用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要给大家分享介绍了关于动态Axios的配置步骤，文中通过示例代码介绍的非常详细，通过这个教程大家可以很方便的实现动态Axios的配置，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。2018-01-01
这篇文章主要介绍了vue实现标签云效果的示例，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2020-11-11
这篇文章主要介绍了element-table如何实现自定义表格排序，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
最新评论