vue3动态注册路由

在vue-cil2中，我们可以通过webpack中require.context这个api实现工程自动化，而在vue-cil3里vite替代了webpack，节省了webpack冗长的打包时间的同时我们也会失去webpack的此类部分api。

不过没关系，我们可以使用vite中的 import.meta.glob()异步、import.meta.globEager()同步 来进行替换。

若是使用import.meta.glob()、import.meta.globEager()
报错没有此方法解决方案，我是在package.json文件中添加：

"devDependencies": {
    "vite": "^2.5.1",
    "@vitejs/plugin-vue": "^1.6.0",
    "@vue/compiler-sfc": "^3.0.4"
  }

下载vitejs依赖后，在到在vite.config.js文件中添加相关配置解决问题的，原理尚未理清暂时这样

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
   base: './',
   resolve: {
      alias: {
         '@': path.resolve(__dirname, 'src'),
      },
   },
   // build: {
   //    outDir: 'dist'
   // },
   plugins: [vue()],
   server: {
      https: false, // 是否开启https
      open: true,  // 是否自动在浏览器打开
      port: 3000,   // 端口号
   },
})

动态注册路由

import { createRouter, createWebHistory } from 'vue-router'
const registerRoute = () => {
   const routerList = []
   const modules = import.meta.globEager('./*/*.rou.js')
   for (const val of Object.values(modules)) routerList.push(val.default)
   return routerList.flat()//用于将嵌套的数组拉平 [1, 2, [3, 4]].flat()// [1, 2, 3, 4] 
}
const routes  = [
   {
      path: '/',
      name: 'defaultRouter',
      redirect: { name: 'login' },
   },
   {
      path: '/login',
      name: 'login',
      component: () => import('../views/login/login.vue')
   },
   {
      path: '/template',
      name: 'template',
      redirect:'/coupon', // 设置默认子路由
      component: () => import('../views/template.vue'),
      children:[ ...registerRoute() ]
   }
]
const router = createRouter({
   history: createWebHistory(),
   routes
})
export default router;

跳转flat()知识点
待续。。。