Vue Router里的name有啥用？怎么用才高效？

terry 3小时前阅读数 10 #Vue

文章标签 Vue Router；name

学Vue Router的时候，不少同学都会疑惑“路由配置里的name属性到底有啥用？不加name行不行？不同场景咋用name更顺手？”其实name在Vue Router里是个挺关键的小属性，把它玩明白能解决不少开发里的麻烦事儿，今天咱就从多个场景唠唠Vue Router的name，看看它到底咋帮我们优化开发、避免踩坑～

Vue Router的name，本质是给路由“贴身份证”

Vue Router里的路由配置，就像给不同页面/组件规划“路线”，每个路由配置对象里的name，相当于给这条“路线”发个唯一身份证，举个例子：

const routes = [
  {
    path: '/home',
    name: 'HomeRoute',
    component: Home
  },
  {
    path: '/user/:id',
    name: 'UserProfile',
    component: User
  }
]

这里HomeRoute和UserProfile就是路由的名字。为啥要搞这个“身份证”？ 因为路由多了以后，光靠path匹配容易出问题，比如后期要改/home为/index，要是代码里到处用this.$router.push('/home')，改路径就得全局替换；但如果用name，路由配置里改path，代码里导航用this.$router.push({ name: 'HomeRoute' })，完全不用动业务代码，维护性直接拉满～

而且路由的name是路由记录（route record）的标识，Vue Router内部匹配路由、管理路由栈的时候，name能帮它更精准找到对应的路由配置，避免因为路径规则复杂（比如带参数、通配符）导致匹配错误。

编程式导航里，name比path“聪明”在哪？

做页面跳转时,常见两种方式：用path写死路径 和 用name配合参数，咱对比下差别就懂name的好：

（1）路径变了，name能“抗揍”

假设产品经理说“用户页路径从/user改成/member”，如果之前导航用的是this.$router.push('/user')，那所有跳转的地方都得改；但如果用name，路由配置改成：

{
  path: '/member', // 路径变了
  name: 'UserProfile', // name不变
  component: User
}

业务代码里的this.$router.push({ name: 'UserProfile' })完全不用动，因为name才是路由的“身份证”，路径只是“外在表现”。

（2）传参时，name配params更“安全”

动态路由传参（比如用户ID）时，用name + params比path + query舒服太多，看例子：

// 用name + params
this.$router.push({ 
  name: 'UserProfile', 
  params: { id: 123 } 
})
// 对应的路由配置path得是'/user/:id'，这样参数会被解析到$route.params里
// 用path + query
this.$router.push('/user?id=123') 
// 参数在$route.query里，还得自己解析，而且路径可读性差

更关键的是：用name传params时，参数是“绑定”到路由配置的动态段的，如果路由配置没有对应的:id，params会被忽略（变成查询参数），这其实是种“约束”，强制我们在路由设计阶段就把参数规则理清楚，避免传参混乱。

和keep - alive搭档，name帮组件“续命”

Vue里的<keep - alive>是用来缓存组件实例，避免重复创建销毁的，但它默认缓存所有组件，有时候我们只想缓存特定路由的组件，这时候name就成了“筛选器”。

步骤：路由name和组件name对应上

路由配置里给路由加name，同时组件自身的name要和路由name保持一致：

// 路由配置
{
  path: '/home',
  name: 'Home', // 路由name
  component: Home
}
// Home组件
export default {
  name: 'Home', // 组件name
  // ...
}

然后在<keep - alive>里用include指定要缓存的组件name：

<template>
  <div id="app">
    <keep - alive include="Home">
      <router - view/>
    </keep - alive>
  </div>
</template>

这样一来,只有name为Home的组件会被缓存，用户从首页跳到其他页面再回来，Home组件的状态（比如表单输入、滚动位置）还在，不用重新渲染，性能直接起飞～

要是路由组件很多,还能搞多个keep - alive或者用数组include=["Home", "User"]，精准控制每个路由的缓存策略，比盲目缓存所有组件高效多了。

同一个组件对应多个路由？name帮你“辨身份”

开发中经常遇到多个路由复用同一个组件的情况（比如不同分类页用同一个List组件），这时候路由的name能帮组件分清“我现在是哪个路由进来的”。

举个栗子：电商项目里，“热销商品”和“新品推荐”用同一个GoodsList组件，但要显示不同标题和数据，路由配置可以这样写：

const routes = [
  {
    path: '/hot',
    name: 'HotGoods',
    component: GoodsList
  },
  {
    path: '/new',
    name: 'NewGoods',
    component: GoodsList
  }
]

然后在GoodsList组件里，通过$route.name判断当前路由：

<template>
  <div>
    <h1>{{ title }}</h1>
    <!-- 列表内容 -->
  </div>
</template>
<script>
export default {
  computed: {) {
      if (this.$route.name === 'HotGoods') {
        return '热销商品'
      } else if (this.$route.name === 'NewGoods') {
        return '新品推荐'
      }
    }
  }
}
</script>

这样不用为每个路由写重复组件,靠name区分场景，代码复用性拉满～

命名视图+嵌套路由，name咋玩？

Vue Router支持命名视图（一个页面多个<router - view>）和嵌套路由（路由里套路由），这时候name的作用更细分：

（1）命名视图：给不同区域配组件

比如页面分“主体”和“侧边栏”两个区域，各自对应不同组件，路由配置得用components（注意是复数），键要和<router - view name="xxx">的name对应：

{
  path: '/dashboard',
  components: {
    default: MainContent, // 对应<router - view/>（默认name是default）
    sidebar: Sidebar // 对应<router - view name="sidebar"/>
  }
}

这里路由自身的name（如果加的话）是给这个路由记录做标识，和视图的name（default、sidebar）不是一回事，比如给这个路由加name: 'Dashboard'，是为了编程式导航时用name: 'Dashboard'跳转整个页面，而视图的name是用来分配组件到不同区域的。

（2）嵌套路由：父子路由name互不干扰

嵌套路由的配置长这样：

{
  path: '/parent',
  name: 'ParentRoute',
  component: Parent,
  children: [
    {
      path: 'child',
      name: 'ChildRoute',
      component: Child
    }
  ]
}

父路由的name是ParentRoute，子路由是ChildRoute，各自独立，编程式导航时，跳转子路由可以用this.$router.push({ name: 'ChildRoute' })，Vue Router会自动处理嵌套关系，不用手动拼父路径，而且父组件里想跳转到自己的路由，用name: 'ParentRoute'也很方便，不用担心路径层级问题。

用name的几个“避坑指南”

虽然name好用,但也有几个容易踩的坑，提前避坑少掉头发：

（1）name必须全局唯一

整个路由配置里,所有路由的name不能重复！比如有两个路由都叫Detail，Vue Router匹配的时候就懵了，不知道该跳哪个，会导致导航错误，所以起名时尽量带业务前缀（比如GoodsDetail、OrderDetail），避免重名。

（2）路由name≠组件name，但最好对应

前面讲keep - alive时提到，组件要被缓存，得让路由name和组件name一致，但如果组件不是路由专属（比如多个路由复用同一个组件，且不需要缓存），组件name可以和路由name不一样，但为了避免混乱，建议路由级组件的name和路由配置的name保持一致，这样逻辑更清晰。

（3）编程式导航用name时，params要配动态路由

如果路由配置的path没有动态段（比如:id），却用name + params传参，params会被忽略，变成查询参数（挂在url后面?id=123），所以一定要保证：路由path里有对应的动态参数，name传params才会被正确解析到$route.params里。

（4）重复导航要处理

有时候快速连续点击同一个路由（比如按钮点了多次），Vue Router会报“NavigationDuplicated”错误，这时候可以结合name做判断：比如在点击事件里，先检查当前路由name是否和要跳转的name一致，一致就不跳转；或者用replace方法替换当前历史记录（this.$router.replace({ name: 'xxx' })），避免重复记录。

看完这些,是不是觉得Vue Router的name从“不起眼的小属性”变成“开发利器”了？总结下：name是路由的唯一标识，能让导航更灵活、组件缓存更精准、多路由复用更清晰，还能在复杂路由结构（嵌套、命名视图）里保持逻辑不乱，只要把name的用法和坑摸透，Vue路由这块的开发效率和代码可维护性能提升一大截～下次写路由配置时，别忘给每个路由安排个合适的name，让它帮你省心又省力～