自动生成页面的插件--codewhy

-----来源于王元红老师的课程
背景：实现动态路由，两种实现方案

codewhy这个插件应用于方案二的实现；

//全局安装coderwhy插件
npm install coderwhy -g
//应用插件、add3/add2区分创建的vue文件是vue2/vue3 department是最终生成的文件名，后面是路径
conderwhy add3page_setup department -d src/views/main/system/department

效果:会生成两个目录和对应文件、页面vue文件和路由路径的ts文件

步骤：

1.生成各目录文件

2.在vuex登陆模块中进行路由添加

//从文件中将所有的路由对象先读取到数组中
const localRoutes: RouteRecordRaw[]=[] //routes存储的数组是此类型RouteRecordRaw
//读取router/main所有的ts文件,eager:true导入所有文件
const files：Record<string,any> = import.meta.glob(
    '../../router/main/**/*.ts,
    {
        eager: true
    }
)
//将加载的对象放到localRoutes
for(const ket in files){
    const module = files[key]
    localRoutes.push(module.default)    
}
//根据菜单去匹配正确的路由,menu是登陆后获取的信息
for(const menu of userMenus){
    for(const submenu of menu.children){
        const route = localRoutes.find(item=>item.path===submenu.url)
        if(route) router.addRoute('main',route)
    }
}

注意：上面的添加路由方式存在，刷新页面路由丢失的问题，解决方式如下：

2-1、在登陆的store中，建一个actions，用于重新获取路由

       2-2、在pinia注册文件中，进行刷新缓存路由的actions调用

2-3、在main.ts中注册，注意pinia注册要早于router注册