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拖拽改变宽度的实现示例
本文主要介绍了vue拖拽改变宽度的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2023-07-07
Vue编写多地区选择组件
这篇文章主要为大家详细介绍了Vue编写一个挺靠谱的多地区选择组件的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-08-08
vue数据监听解析Object.defineProperty与Proxy区别
这篇文章主要为大家介绍了vue数据监听解析Object.defineProperty Proxy源码示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
解决el-menu标题过长显示不全问题
本文主要介绍了如何解决el-menu标题过长显示不全问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,感兴趣的朋友们跟着小编来一起学习学习吧
2023-12-12
如何测量vue应用运行时的性能
这篇文章主要介绍了如何测量vue应用运行时的性能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下
2019-06-06
Vue实现左右菜单联动实现代码
这篇文章主要介绍了Vue实现左右菜单联动实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
vue3实现鼠标右键显示菜单,点击其他地方消失问题
这篇文章主要介绍了vue3实现鼠标右键显示菜单,点击其他地方消失问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-04-04
Vue倒计时3秒后返回首页Demo(推荐)
这篇文章主要介绍了Vue倒计时3秒后返回首页Demo,倒计时结束后要清除计时器,防止内存泄漏,本文通过示例代码给大家介绍的非常详细,需要的朋友参考下吧
2023-11-11
VUE3中watch和watchEffect的用法详解
本文主要介绍了VUE3中watch和watchEffect的用法详解，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-02-02
使用Vue创建前后端分离项目的完整过程(前端部分)
这篇文章主要介绍了使用Vue.js和Node.js搭建一个前端和后端分离的项目,并使用VueCLI3脚手架、axios进行HTTP请求、Vue-router实现前端路由和vuex进行状态管理,需要的朋友可以参考下
2025-01-01