electron-vue项目搭建-router自动化模块

---

前言

之前使用vue-ts生成了基础项目，后来改用了vue-js，流程方法基本是一样的，参考连接：

https://blog.csdn.net/qq_39664702/article/details/124046966

---

路由生成规则

1. 所有页面 vue 文件，需要全部放在@/src/views 中
2. 页面 vue 文件命名规则统一使用`kebab-case` 小写加横杠命名
3. 页面专用组件放在页面对应目录下的`components`中，`components`文件夹下的 vue 文件，不会被路由文件进行处理
4. 基础组件、公共组件和布局组件再放到`src/components`下,所有组件统一使用`PascalBase`大驼峰命名
5. 路由管理页面的 index.vue 是必须的，不可省略
6. 路由获取文件目录规则,views:

模拟文件结构

views                    // 页面文件
├──child                 // 大屏文件夹
|   ├──index.vue         // 路由管理页面
├──main                  // 触屏-主屏文件夹
|   ├──index.vue         // 路由管理页面
├──media                 // 触屏-多媒体文件夹
|   ├──index.vue         // 路由管理页面

router文件实现

文件路径：@/src/router/index.js

import { createRouter, createWebHistory } from "vue-router";
// 获取所有vue文件
const contexts = require.context("@/views", true, /\.vue$/);
// 最终的路由结构
const routes = [];
// 获取所有文件信息
const getRoute = (context) => {
  const arrs = [];
  // 处理路由列表
  context.keys().forEach((key) => {
    const item = context(key).default;
    const itemKey = key.replace(/(\.\/)/g, "");
    const meta = typeof item.meta === "object" ? item.meta : {};

    arrs.push({
      itemKey,
      path: `/${item.name}`,
      name: item.name,
      meta,
      component: item,
    });
  });
  // 排序
  arrs.sort((a, b) => {
    const aKeyLists = a.itemKey.split("/");
    const bKeyLists = b.itemKey.split("/");
    return aKeyLists.length - bKeyLists.length;
  });
  // 根据itemKey，生成router的对象文件
  const arrObjs = {};
  arrs.forEach((item) => {
    const itemKeyLists = item.itemKey.split("/");
    switch (itemKeyLists.length) {
      case 1:
        arrObjs[item.name] = {
          path: item.path,
          name: item.name,
          meta: item.meta,
          component: item.component,
        };
        break;
      case 2:
        if (itemKeyLists[1].indexOf(".vue") !== -1) {
          if (!arrObjs[itemKeyLists[0]]) {
            arrObjs[itemKeyLists[0]] = {
              path: `/${itemKeyLists[0]}`,
              component: "",
              children: [],
            };
          }

          if (itemKeyLists[1] === "index.vue") {
            arrObjs[itemKeyLists[0]].component = item.component;
          } else {
            arrObjs[itemKeyLists[0]].children.push({
              path: item.path,
              name: item.name,
              meta: item.meta,
              component: item.component,
            });
          }
        }

        break;
      case 3:
        if (itemKeyLists[2].indexOf(".vue") !== -1 && itemKeyLists[1] !== "components") {
          if (!arrObjs[itemKeyLists[0]][itemKeyLists[1]]) {
            arrObjs[itemKeyLists[0]][itemKeyLists[1]] = {
              path: `/${itemKeyLists[0]}`,
              component: "",
              children: [],
            };
          }

          if (itemKeyLists[2] === "index.vue") {
            arrObjs[itemKeyLists[0]][itemKeyLists[1]].component = item.component;
          } else {
            arrObjs[itemKeyLists[0]][itemKeyLists[1]].children.push({
              path: item.path,
              name: item.name,
              meta: item.meta,
              component: item.component,
            });
          }
        }
        break;

      default:
        break;
    }
  });
  // object转数组
  for (const key in arrObjs) {
    const item = arrObjs[key];
    routes.push(item);
  }
};
//初始化，获取路由列表
getRoute(contexts);

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

main.js 挂载路由

文件路径：@/src/main.js

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

生成的路由列表信息：

文件页面demo

index.js页面

<template>
    <div>
        <!-- 必须要，不可省略 -->
        <router-view></router-view>
    </div>
</template>
<script>
export default {
    name: 'MainIndex',
}
</script>

具体业务页面

<template>
    <div>
        <h1>This is an page</h1>
    </div>
</template>
<script>
export default {
    name: 'ChildRun', // 路由中的name和path以此处的name为主
    meta: { // 路由中的 meta，可以自定义，都会自动生成到路由中
        showTab: true,
        showSideBar: true,
    },
}
</script>