Vue Router中Matcher的初始化流程

Vue Router的Matcher是用来匹配路径与路由配置的。该匹配器会在Vue Router的实例化过程中被初始化。Matcher的初始化流程如下：

Vue Router的Matcher是用来匹配路径与路由配置的。该匹配器会在Vue Router的实例化过程中被初始化。Matcher的初始化流程如下：

1. 创建空的路由映射表

在Vue Router实例化时，会创建一个空的路由映射表，用于存储路径与路由配置之间的映射关系。该映射表是一个由路径作为键，路由配置作为值的对象。

示例：

const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About },
]

const router = new VueRouter({
  routes,
})

在这个示例中，Vue Router会初始化一个空的路由映射表，并将传入的路由配置数组routes添加到映射表中。

1. 遍历路由配置，将每个配置项添加到路由映射表中

Vue Router会遍历配置数组routes，将其中的每个路由配置项都添加到路由映射表中。在添加路由配置时，Vue Router会将路径转化为正则表达式，并将其作为键添加到映射表中。

示例：

对于路由配置数组：

const routes = [
  { path: '/home', component: Home },
  { path: '/about/:id', component: About },
]

Vue Router会将/home和/about/:id转化为正则表达式，并将其作为键添加到路由映射表中：

{
  '/home': { path: '/home', component: Home },
  '/about/:id': { path: '/about/:id', component: About }
}

其中，/about/:id的正则表达式为/^\/about\/([^\/]+?)\/?$/i，用于匹配路径中的:id参数。

1. 初始化路由记录

在Vue Router的Matcher中，每一个路径都会对应一条路由记录。每个路由记录包含了路径、处理该路径的路由配置和该路由配置的级别等信息。

示例：

对于路由配置数组：

js
const routes = [
{ path: '/home', component: Home },
{ path: '/about/:id', component: About },
]

Vue Router会为每个路由配置生成一个路由记录。以/home为例，生成的路由记录如下：

js
{
path: '/home',
components: { default: Home },
instances: {},
name: null,
parent: undefined,
matchAs: '/',
redirect: undefined,
beforeEnter: undefined,
meta: {}
}

其中，path表示路径，components表示需要渲染的组件，instances表示渲染出的组件实例对象，matchAs为匹配路径的别名（当alias存在时），meta为路由元数据，包含路由信息等。

1. 根据路由记录的优先级生成路由匹配数组

Vue Router的Matcher根据路由配置的添加顺序生成路由匹配数组，并根据路由的优先级调整数组顺序。最终生成的匹配数组会作为Matcher的内部属性。

示例：

对于路由配置数组：

const routes = [
  { path: '/home', component: Home },
  { path: '/about/:id', component: About },
  { path: '*', component: NotFound },
]

Vue Router会在Matcher中生成路由匹配数组：

[
  {
    path: '/about/:id',
    components: { default: About },
    instances: {},
    name: null,
    parent: undefined,
    matchAs: '/',
    redirect: undefined,
    beforeEnter: undefined,
    meta: {},
    regex: /^\/about\/([^\/]+?)\/?$/i,
    score: 500,
    keys: [{ name: 'id', prefix: '/', delimiter: '/', optional: false, repeat: false, pattern: '[^\\/]+?' }]
  },
  {
    path: '/home',
    components: { default: Home },
    instances: {},
    name: null,
    parent: undefined,
    matchAs: '/',
    redirect: undefined,
    beforeEnter: undefined,
    meta: {},
    regex: /^\/home\/?$/i,
    score: 1000,
    keys: []
  },
  {
    path: '*',
    components: { default: NotFound },
    instances: {},
    name: null,
    parent: undefined,
    matchAs: '/',
    redirect: undefined,
    beforeEnter: undefined,
    meta: {},
    regex: /^(.*)$/i,
    score: 0,
    keys: []
  }
]

其中，路由匹配数组每一项都是一个路由记录，包含了路径、路由配置、正则表达式等信息。Matcher会根据路由优先级调整路由匹配数组的顺序，优先级高的路由配置会先被匹配。

综上所述，Vue Router中Matcher的初始化流程包括创建空的路由映射表、遍历路由配置，将每个路由配置添加到路由映射表中、初始化路由记录和根据路由记录的优先级生成路由匹配数组。