Vue3中使用vite 如何做自动路由呢?

简单记录一下,昨儿研究vue3+ vite 没有找到现成的自动路由的方案,遂上github上寻找了一些开源项目,借鉴一下人家的写法,很简单,使用

import.meta.glob

但是这个方法有点严格

import.meta.globEager跟import.meta.glob都无法往子文件夹继续查找文件

之前的require.context都是可以的

贴下代码吧

// 引入 router
import { createRouter, createWebHistory } from 'vue-router'
// 引入路由各页面配置
import routes from './routes'
const modules = import.meta.glob('../pages/*.vue');

// 循环进入路由
for (let i in modules) {
    let item = modules[i];
    const routePath = item.name.replace(/(.*\/)*([^.]+).*/ig,"$2");
    routes.push({
        path: '/'+routePath,
        name: routePath,
        title: routePath,
        component: () => import(item.name), //.vue不能省略
    })
}
  
// 配置router对象
const router = createRouter({
    history: createWebHistory(),
    routes
})

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值