vue-router 源码分析—

vue-router 源码分析——9.别名

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

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

本章讲解router中别名是如何实现的。
另外我的vuex3源码分析也发布完了，欢迎大家学习：
vuex3 最全面最透彻的源码分析
还有vue-router的源码分析：
vue-router 源码分析——1. 路由匹配
vue-router 源码分析——2. router-link 组件是如何实现导航的
vue-router 源码分析——3. 动态路由匹配
vue-router 源码分析——4.嵌套路由
vue-router 源码分析——5.编程式导航
vue-router 源码分析——6.命名路由
vue-router 源码分析——7.命名视图
vue-router 源码分析——8.重定向

官网示例：

/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。
“别名”的功能让你可以自由地将 UI 结构映射到任意的 URL，而不是受限于配置的嵌套路由结构。

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

Router初始化时对别名的处理

路由的别名和重定向一样，也会记录到路由记录上。通过下面的源码分析可以发现，别名的数据结构是[]string，这表明我们在定义一个路由的别名时，除了像上面的官网例子中使用字符串path外，还能定义一个数组。这是官网中没有说明的功能。
之后，遍历别名数组，创建了一个基于别名路径的路由记录。别名路由记录可以简单看成除了path，matchAs属性不同外，其他的内容都和’/a’路由记录相同。

// ./create-route-map.js
function addRouteRecord(
    ...
) {
    const { path, name } = route
    ...
    const record: Record = {
        alias: route.alias
            ? typeof route.alias === 'string'
                ? [route.alias]
                : route.alias
            : [],
        ...                                                                                        
    }
    ...
    if (route.alias !== undefined) {
        const aliases = Array.isArray(route.alias) ? route.alias : [route.alias]
        for(let i = 0; i < aliases.length; ++i) {
            const alias = aliases[i]
            ...
            const aliasRoute = {
                path: alias,
                children: route.children            
            }
            addRouteRecord(
                pathList,
                pathMap,
                nameMap,
                aliasRoute,
                parent,
                record.path || '/' // matchAs            
            )
        }
    }
}

访问别名时的逻辑

当用户访问的是别名’/b’的url时，触发的路由匹配会匹配到上面描述的别名路由记录。然后在生成路由时，调用alias函数执行别名路由生成操作。
在alias函数中，通过别名路由的matchAs属性（即正式路径’/a’），进行真正的路由匹配，再创建对应路由。
这样，就实现了router的别名功能。

// ./create-matcher.js
export function createMatcher(
    routes: Array<RouteConfig>,
    router: VueRouter
): Matcher {
    ...
    function _createRoute(
        record: ?RouteRecord,
        location: Location,
        redirectedFrom?: Location
    ): Route {
        ...
        if (record && record.matchAs) {
            return alias(record, location, record.matchAs)        
        }
        ... 
    }
    function alias(
        record: RouteRecord,
        location: Location,
        matchAs: string
    ): Route {
        const aliasedPath = fillParams(matchAs, location.params, `aliased route with path "${matchAs}"`)
        const aliasedMatch = match({
            _normalized: true,
            path: aliasedPath     
        })
        if (aliasedMatch) {
            const matched = aliasedMatch.matched
            const aliasedRecord = matched[matched.length - 1]
            location.params = aliasedMatch.params
            return _createRoute(aliasedRecord, location)
        }
        return _createRoute(null, location)
    }
}