Vue Router学习（六）—— 命名路由

前言

上节介绍了编程式导航，了解了ts类型及底层源码，路由导航是通过path或name进行相关导航，path是路径，name是什么呢？它被称为命名路由，本节我们就来学习相关知识。

命名路由

name表示路由的命名，任何一个路由都能够设置name属性，当我们想要跳转到某个路由时可以用name属性表示。

   // 声明式跳转
   <router-link :to="{ name: 'home'}">home</router-link>
   // 导航式跳转
   router.push({ name: 'home' })

path与name的区别我们可以看下官方介绍：

• path会经过百分号编码 的，百分号编码是将特殊字符进行安全转义的一种编码形式，涉及的字符有：
  " "（空格） ------------ 编码为 "%20"
  "/"（斜杠） ------------ 编码为 "%2F"
  ":"（冒号） ------------ 编码为 "%3A"
  "?"（问号） ------------ 编码为 "%3F"
  "="（等号） ------------ 编码为 "%3D"
  "#"（井号） ------------ 编码为 "%23"
• name就是路由的名称，ts类型为RouteRecordName：

   type RouteRecordName = string | symbol

源码

上节讲解编程式导航时看了一下实现源码，导航方法是使用history API导航到具体的location，不管是path还是name都要找到对应的location，path本身就是url路径一部分比较好理解，name路由名称跟location关联性就不大了，我们看下源码是怎么处理的。

首先使用resolve处理传过来的to路由，得到location，resolve函数也有点复杂，需要处理好几种情况，我们就看一下与name相关的处理逻辑。

name会使用matcher中的resolve，那我们就继续往下找name相关逻辑。

通过matcherMap获取了matcher，matcherMap是一个字典，我们来看下它的定义：

最后我们来看下matcher的定义：

根据上面的源码我们可以梳理下用name导航时的过程：

1. 在添加routes时，通过matcherMap将路由name与路由route映射起来。
2. 在调用编程式导航方法时，会判断to参数中是否包含name字段。
3. 通过matcher.resolve方法去获取name对应的route信息。
4. 根据route信息获取跳转的url进行跳转。
   接着让我们回到第二步看到path是如何操作的：
   很明显path处理就很简单，只有path时，把path拼接一下调用parseURL；path与name一起时会从params参数入手。 path与name两者都能用于路由导航，name命名路由的出现感觉更多是为了方便开发，具体的区别可以简单总结一下：

• path会经过百分号编码。
• path用query传参，name用params传参。
• 两者源码处理逻辑不同，开发时name写法会简单点。

总结

命名路由name是声明路由的一个属性，它带给了我们简便的导航路由写法，以及params传参方。本节提到的源码只是简单解析了下，要想深入可以根据文章中的顺序看下完整代码。