const modules = import.meta.glob("../views/**/*.vue");
let autoRoutes: Route[] = [];
for (let key in modules) {
  console.log(key);
  autoRoutes.push({
    filePath: key,
    path: key.replace("../views/", "/").replace(".vue", ""),
    component: modules[key]
  });
}

2、使用addRoute挂载动态路由

const mountRoutes = async () => {
  for (const item of autoRoutes) {
    if (item.path) {
      const route = {
        path: item.path,
        component: () => import(item.filePath)
      };
      console.log(route);
      router.addRoute(route);
    }
  }
};

3、路由配置

import { createRouter, createWebHashHistory } from "vue-router";
import indexPage from "../views/index/index.vue";
import { mountRoutes } from "./auto-load";
import { getToken } from "../utils/token";

const routes = [
  { path: "/", component: indexPage },
  { path: "/login", component: () => import("../views-common/account/login/index.vue") }
];
export const router = createRouter({
  history: createWebHashHistory(),
  routes
});

const authWhiteList = [
  "/login"
];
// 是否已经挂载动态路由标识
let routeHasMounted = false;
router.beforeEach(async (to, from, next) => {
  // 是否为免登录白名单 是的话直接放行
  if (authWhiteList.includes(to.path)) {
    next();
  } else {
    // 需要免登录的页面 判断是否已经登录
    if (!getToken()) {
      // 未登录的直接跳转到登录页面
      next({ path: "/login", replace: true });
    } else {
      // 已经登录的 判断是否挂载动态路由
      if (!routeHasMounted) {
        // 未挂载状态 挂载动态路由
        await mountRoutes();
        // 将挂载状态设置为true
        routeHasMounted = true;
        // 重新路由到当前页面 因为此页面在第一次打开的时候是 匹配不到路由的
        // 这里replace: true 是为了让网页不能返回上一页
        next({ ...to, replace: true });
      } else {
        // 已经挂载状态 直接放行
        next();
      }
    }
  }
});

vue-quill-editor 默认的是以base64保存图片，会直接把图片base64和内容文本一同以字符串的形式提交到后端。 现在这样不科学

安装 vue-quill-editor

npm i vue-quill-editor --save

富文本示例代码
https://github.com/gek6/letou_hr/blob/master/letou_admin_web/src/views/rich_text/rich_text.vue
图片直传七牛云
https://github.com/gek6/letou_hr/blob/master/letou_admin_web/src/api/upload.js

思路

• 用自定义的方法代替quill-editor中的图片点击事件
• 点击上传图片的icon后，去触发file类型 input 的点击事件，选择图片。（我这用的是饿了么的上传组件，上传到七牛云我已经写好了）
• 监听input的 onchange 拿到选择的文件数据，然后是要上传到自己服务器呢 还是上传到七牛云 就随意了。
• 上传完成以后 将图片的远程路径 添加到富文本内容区域
  

  页面内引入

  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import { quillEditor } from 'vue-quill-editor'
  //注册组件
  components: {
  quillEditor
  },

<div class="rich_box">
    <!--富文本组件-->
    <quill-editor v-model="content" ref="myQuillEditor" :options="options"></quill-editor>
</div>
<!--饿了么上传组件，也可以用input代替，都是隐藏起来-->
<el-upload
    class="avatar-uploader"
    action=""
    :http-request="to_upload_img"
    :show-file-list="false"
    style="display: none"
    >
    <i class="el-icon-plus avatar-uploader-icon" id="imgInput"></i>
</el-upload>

添加自定义方法

//mounted钩子中 替换插件图标点击事件
// 为图片ICON绑定事件  getModule 为编辑器的内部属性
this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', this.imgHandler)

// 点击图片ICON触发事件
imgHandler(state) {
  console.log(state)
  this.addRange = this.$refs.myQuillEditor.quill.getSelection()
  if (state) {
    // let fileInput = document.getElementById('imgInput')
    // fileInput.click() // 加一个触发事件
    // 选择并上传一张图片
    let fileInput = document.getElementById('imgInput')
    fileInput.click() // 加一个触发事件
  }
},

to_upload_img(formdata){
  return new Promise((resolve,reject)=>{
    upload_img(formdata).then(res=>{
      // 图片的远程路径
      let value = res.key;
      // 将图片添加到富文本内容区域
      this.addRange = this.$refs.myQuillEditor.quill.getSelection();
      // 调用编辑器的 insertEmbed 方法，插入URL
      this.$refs.myQuillEditor.quill.insertEmbed(this.addRange !== null ? this.addRange.index : 0, 'image', value, Quill.sources.USER)   

    })
  })
}