前言

今天来看看本项目的router
我们都知道js版本下的router写法就是：创建routes数组，该数组包含多个路由信息对象

const routes = [{
		path: '/IndexView',
		component: IndexView,
		children: [{
				path: '/',
				component: HomeView,
				meta: {
					requireToken: true
				}
			},
		]
}]

而我们又知道ts中创建一个对象，需要先明确它的类型，也就是说我们要创建routes就要先去创建一个符合上面代码的类型，用来创建routes，但是这件事不需要我们亲自去做，vue-router中已经内置了用于约束routes的类型，我们只需要引入进来用就好了，

js版本下的vue3+router写法

ts版本下的vue3+router写法

自己写的ts版本vue3+router写法

import { createRouter, createWebHashHistory,type RouteRecordRaw } from 'vue-router'

import Home from "@/views/home/Index.vue"

const routes:Array<RouteRecordRaw> = [
    {
        path:'/home',
        component:Home,
        // redirect:'noredirect',
        alias: '/',  // 设置别名，/ 和 /home 都访问同一个组件
        name:'Home',
        meta:{
            isLand:true,
            icon:'#ccc'
        }

    }
]

const router = createRouter({
    history:createWebHashHistory(),
    routes
})
export default router

看起来很简单

目标项目的router写法

看起来很多，一个个解析

基本引入代码

读取./constantModules文件夹下的所有ts文件，返回一个数组（元素为router实例）

webpack写法 CommonJS 的 require

vite写法 ES 模块

constantModules下文件

创建一个以RouteRecordRaw(vue-router@4中定义路由配置对象的类型)为泛型约束的空数组

扫描 constantModules目录下所有的 .ts文件

排除 index.ts文件（通常是导出文件）
将每个文件中的默认导出（路由配置数组）合并到一个大数组中
最终得到所有路由配置的集合

commonJs写法

es 写法

这么做的优点

仅是自动化这个优点就已经非常的好了，能够根据创建的文件来自动加载新的路由，不需要自己在单个文件中去重复修改添加代码，导致一个router文件中的代码量过大。
这里展示一个项目的router代码，200行routes代码，这看起来会让人很头疼，管理路由的时候也会很不方便。

所以将这种对象式的路由管理转变为文件式的路由管理是很好的，不仅节省了代码，而且可以通过路由文件直截了当的管理我们的路由，也会方便团队协作的。

自动批量加载和合并权限相关的路由配置模块

commonJs模块管理写法
es模块管理写法

创建constantRoutes(以Array为泛型约束)

constantRoutes由重定向路由（/redirect）、默认路由(/)和前面使用模块化加载获取到的constantModules模块下的路由数组的展开后元素组成。

创建asyncRoutes(以Array为泛型约束)

constantRoutes由前面使用模块化加载获取到的constantModules模块下的路由数组的展开后元素组成。

使用createRouter创建router

使用Hash 模式作为历史模式

创建并暴露resetRouter方法

结尾

很显然这里我们发现创建asyncRoutes并未在本文件中被使用，而是在store/modules/permission/actions.ts中被使用了

使用ActionTree和Actions的交叉作为泛型约束创建对象，… …

router创建并暴露后在main.ts中被使用