vite Glob 导入文件和addRoute动态创建相应路由

想要将某个目录下的文件内容全部导出，并且为每一个文件添加相应的路由。

在hooks中创建动态导入文件的函数

// hooks/useDynamicImport.ts
export async function useDynamicImportMarkdown() {
    const studyArrString: Array<string> = []
    const modules = import.meta.glob('../../../blog_server/src/app/static/*.md', { as: 'raw' }); //文件的路径
    for (const path in modules) {
        await modules[path]().then((mod) => {
            studyArrString.push(mod)
        })
    }
    return studyArrString
}

在组件中创建相应的路由

//Nav.vue
//引入hooks
import {useDynamicImportMarkdown} from '@/hooks/useDynamicImport'
let studyArrString = await useDynamicImportMarkdown()
//getterStudy为相应文件的名字数组
getterStudy.value.forEach((item, index) => {
  router.addRoute({
    name: item.study_name,
    path: `/${item.study_name}`,
    props: { content: studyArrString[index] }, //传入相应的文件内容
    component: () => import('@/views/Study/index.vue') //要展示相应内容的组件
  })
})

由于使用的Nav组件是异步组件，所有在其他地方引入时候可以使用Suspense内置组件

<Suspense>
       <Nav />
       <template #fallback>
        Loading...
       </template>
</Suspense>