0
点赞
收藏
分享

微信扫一扫

vue3动态注册路由

夏木之下 2022-02-21 阅读 152

在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()知识点
待续。。。

举报

相关推荐

0 条评论