动态路由，路由重置，常量路由，$ref，表单验证流程

1 常量路由

2 路由重置

项目初始渲染时，路由实例仅加载登录页等公共常量路由；为避免不同用户间权限路由残留，设计了 resetRouter 函数，其作用是清除动态路由、将路由恢复为仅含常量路由的初始状态（常量路由为公共路由无需重置）；新用户登录时，先调用该函数清除上一用户的动态路由，再根据后端返回的权限为当前用户添加专属动态路由，退出登录时也需执行重置操作。

3 matcher

matcher 内部属性创建 router 实例后自动生成存储解析后的路由匹配规则（运行时核心）

matcher是路由规则的 "总仓库"，包含所有已加载的路由（常量 + 动态）；

动态添加权限路由 = 往matcher里追加新规则；

重置路由 = 替换matcher为仅含常量路由的新仓库，彻底清空旧权限规则。

所以重置路由需要赋值给matcher属性

javascript 复制代码

export const resetRouter = () => {
  router.matcher = new VueRouter({
    routes: constantRoutes,
  }).matcher;
};

4 router.addRoute()

路由实例（router）自带的内置方法；

调用该方法会直接往 matcher 中追加新的路由规则，是实现动态权限路由的核心方式。

5 $ref

r e f s 作用域仅限当前组件模板，只能直接获取模板内的子组件或 D O M 元素。父组件用 t h i s . refs 作用域仅限当前组件模板，只能直接获取模板内的子组件或 DOM 元素。父组件用 this. refs作用域仅限当前组件模板，只能直接获取模板内的子组件或DOM元素。父组件用this.refs，是通过自身实例访问名下绑定的引用。

拿到子组件实例后，该实例本身就等价于子组件的 this，直接调用其属性、方法或 $refs 即可，无需再加 this。

获取孙子组件，需父先获取子实例，再通过子实例的 $refs 层层获取。

javascript 复制代码

 this.$refs.loginFormRef.$refs.elFormRef.validate((valid)

这里是父组件通过$refs获取子组件的实例，然后通过子组件的实例在去获取孙子组件elFormRef实例，或取到实例了，最终父组件就可调用孙子的方法

javascript 复制代码

this.$refs.loginFormRef.getFormData();

直接获取到子组件，调用子组件方法

6表单验证流程

表单收集的数据存在 loginForm这里，然后通过 getFormData方法获取到，然后用户输入数据的时候会先进行表单规则验证，如果表单规则通过，把getFormData()里返回的数据赋值给 formData，然后比对账号密码，在提交到vuex中

7接收用户信息

8 权限路由

9添加权限路由的标识

10 cloneDeep(routes)

cloneDeep(routes)这里的routes就是asyncRoutes全量路由，需要拷贝在修改，不能直接改原来的全量路由

11 动态路由规则添加

12 resolve

13 路由过滤的规则

14.动态路由总结

首先这个项目渲染的时候，会先注册常量路由，比如登录页，404页面路由，这个是所有用户都可访问的，用户登录，登录完成之后，后端会返回这个用户的权限路由，然后根据这个用户的权限路由去全量路由里筛选，用户有的权限路由留下，没有的减掉，筛选完成之后通过 router.addRoute添加筛选的权限路由，这样就满足了，不同用户，能够访问不同页面的功能

15 解决权限路由刷新丢失问题

15两个addRoutes函数