【vite 自动配置路由】

CODER-V

发布于 2023-03-24 10:41:04

1.1K00

代码可运行

文章被收录于专栏：藏经阁

运行总次数：0

代码可运行

手动配置路由，是一个没有技术含量又浪费时间的工作。本文将介绍 vite 构建的 vue3 项目如何编写一个自动配置路由的脚本。

约定大于配置

要想使用脚本完成路由的自动配置，我们就需要遵循以下目录规则：

每一个页面对应一个包，当前包下的主页面命名为index.vue；

每个包里必须配置一个page.js；

在每一个page.js里边配置，额外的路由信息，比如：

export default {
 	title: '商品',
	menuOrder: 2
}

原理

因为vite使用的打包工具是rollup，我们可以通过它提供的glob()方法取得目录文件信息，通过一些匹配规则，在解析时自动生成路由。

但是，注意，扫描目录只能生成路由，没有额外的路由信息，如果需要配置额外的路由信息，我们需要配置一个新的page.js文件来配置，并将其配置到脚本中。

代码

// 匹配views目录下的所有page.js，导入页面模块
const pageModules = import.meta.glob('../views/**/page.js',{
    eager: true, // 忽略动态都如函数
    import: 'default' // 提取default出来
})
// 导入组件模块
const comModules = import.meta.glob('../views/**/index.vue')

// 生成并导出路由
const routes = Object.entries(pageModules).map(([pagePath,config])=>{
	// 不明白可以先搭建好目录，打印一下变量看一下
    const path = pagePath.replace('../views','').replace('page.js','') || '/'
    const name = path.split('/').filter(Boolean).join('-') || 'index'
    const comPath = pagePath.replace('page.js', 'index.vue')

    return  {
        path,
        name,
        component: comModules[comPath],
        meta: config
    }
})


// 创建路由器对象
const router = createRouter({
    routes,
    history:createWebHashHistory()
})

// 之后，你就可以做路由拦截配置了

// 路由前置守卫
router.beforeEach((to, from, next)=>{
    // 开启进度条
    NProgress.start()
    next()

})

// 路由后置守卫
router.afterEach((to,from)=>{
    // 关闭进度条
    NProgress.done()
})

//导出路由器对象
export default router

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-03-22，如有侵权请联系 cloudcommunity@tencent.com 删除

vite