vue-router 源码分析——3. 动态路由匹配

这是对vue-router 3 版本的源码分析。
本次分析会按以下方法进行：

1. 按官网的使用文档顺序，围绕着某一功能点进行分析。这样不仅能学习优秀的项目源码，更能加深对项目的某个功能是如何实现的理解。这个对自己的技能提升，甚至面试时的回答都非常有帮助。
2. 在围绕某个功能展开讲解时，所有不相干的内容都会暂时去掉，等后续涉及到对应的功能时再加上。这样最大的好处就是能循序渐进地学习，同时也不会被不相干的内容影响。省略的内容都会在代码中以…表示。
3. 每段代码的开头都会说明它所在的文件目录，方便定位和查阅。如果一个函数内容有多个函数引用，这些都会放在同一个代码块中进行分析，不同路径的内容会在其头部加上所在的文件目录。

本章讲解router中动态路由匹配是如何实现的。
另外我的vuex3源码分析也发布完了，欢迎大家学习：
vuex3 最全面最透彻的源码分析
还有vue-router的源码分析：
vue-router 源码分析——1. 路由匹配
vue-router 源码分析——2. router-link 组件是如何实现导航的
vue-router 源码分析——3. 动态路由匹配

官网中如下的内容是如何实现的

• 官网示例：

const User = {
  template: '<div>User</div>'
}

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

• 动态路由 /user/:id 是如何保证 /user/foo 和 /user/bar 都将映射到相同的路由？
• 冒号 : 的参数值是如何被 this.$route.params 记录的?
• 匹配优先级在源码中如何体现？

动态路由匹配

• 动态路由 /user/:id 是使用了第三方模块 path-to-regexp 实现的正则匹配。这里涉及到了外部模块，所以不做分析，只用知道他使用了 path-to-regexp 就行。
• 这个正则匹配等于:

 /^/user(?:/([^/#?]+?))[/#?]?$/i

• 在路由初始化时，会将所有路由的正则匹配加入到record.regex中

// ./create-route-map.js
import Regexp from 'path-to-regexp'
...
function addRouteRecord(...) {
    const record: RouteRecord = {
        regex: compileRouteRegex(normalizedPath, pathToRegexpOptions),
        ...
    }
}

function compileRouteRegex(
    path: string,
    pathToRegexpOptions: PathToRegexpOptions
): RouteRegExp {
    const regex = Regexp(path, [], pathToRegexpOptions)
    // 在传入的 '/user/:id' 中，这里的regex是一个对象，包含正则匹配规则 /^/user(?:/([^/#?]+?))[/#?]?$/i 和所以定义的参数信息的keys数组
    return regex
}

• 动态路由 ‘/user/:id’ 匹配到的对应参数，是在匹配过程中，通过记录到location.params中，最后赋值到route.params上的。
• 如果不是用:冒号，而是用*通配符来匹配的话，就会记录到params.pathMatch中。

// ./create-matcher.js
export function createMatcher(
    routes: Array<RouteConfig>,
    router: VueRouter
): Matcher {
    ...
    function match(
        raw: RawLocation,
        currentRoute?: Route,
        redirectedFrom?: Location
    ): Route {
        ...
        if (name) {
            ...        
        } else if (location.path) {
            location.params = {}
            for (let i = 0; i < pathList.length; i++) {
                const path = pathList[i]
                const record = pathMap[path]
                // 在 matchRoute 中将动态路由匹配到的参数加入到 location.params 中
                if (matchRoute(record.regex, location.path, location.params)) {
                    return _createRoute(record, location, redirectedFrom)
                }
              }        
        }
    }
    function matchRoute(
        regex: RouteRegExp,
        path: string,
        params: Object    
    ): boolean {
        const m = path.match(regex)
        if (!m) {
            return false        
        } else if (!params) {
            return true        
        }
        for (let i = 1, len = m.length; i < len; ++i) {
            const key = regex.keys[i-1]
            // '/user/:id' 的keys等于 [{ name: 'id', prefix: '/', suffix: '', pattern: '[^\\/#\\?]+?', modifier: '' }]
            if (key) {
                // 如果key没有name属性，就会用pathMatch做params的键，这里对应官网说的通配符*匹配的参数
                params[key.name || 'pathMatch'] = typeof m[i] === 'string' ? decode(m[i]) : m[i]            
            }        
        }
        return true
    }
}

匹配优先级

• 匹配的优先级就按照路由的定义顺序：路由定义得越早，优先级就越高。
• 在router初始化时，按路由的定义顺序生成了pathList。
• 在匹配路由的过程中，是遍历pathList进行匹配搜索的，如果匹配到就直接生成route。所以路由定义得越早，优先级越高。