当前位置：首页 > news >正文

用vite动态导入vue的路由配置

news 2025/4/29 8:19:51

在Vue应用中，通过路由可以实现不同页面之间的切换，同时也可以实现页面之间的传参和控制页面的显示与隐藏。但是我们在开发的过程中，会发现在路由配置中的路由配置和我们的项目结构高度重复，在我们修改页面文件结构时非常的麻烦与复杂，这时候，如果可以动态的导入路由，就可以大大提示我们项目的可维护性。

我们在开发中会经常听见一句话，约定大于配置，路由的动态导入也是这句话应用的一种，我们这里动态导入路由模仿了在uniapp进行小程序开发的页面配置文件，要求有以下几点：

所有的页面都必须配置到/src/pages文件夹下；
所有的页面文件层级必须是/src/pages/页面文件夹名称/；
所有的页面文件中必须有page.ts作为配置文件和index.vue作为页面入口文件；

结构展示如下：

page.ts文件展示：

//home的page.ts
export default {title: '首页',menuOrder: 1,childrens: [`../pages/homechildren`]
}

//homechildren的page.ts
export default {title: '首页的子组件',menuOrder: 1,isChild: true,
}

//login的page.ts
export default {title: '登录',menuOrder: 2
}

此时我们要通过vite的函数import.meta.glob()和import()扫描pages文件夹动态生成路由，代码如下：

//路由配置文件
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'const pages = import.meta.glob('../pages/**/page.ts', {eager: true,import: 'default'
})const components = import.meta.glob('../pages/**/index.vue')const getChildRoutes = async (childrens: string[]) => {const res = [];for (const item of childrens) {const pageModule = await import(`${item}/page.ts`);const componentModule = await import(`${item}/index.vue`);const routePath = item.replace('../pages/', '').replace('/page.ts', '') || '/';const name = routePath.split('/').filter(Boolean).join('-') || 'index';res.push({path: routePath,name,component: componentModule.default,meta: pageModule.default});}return res;
};const routes = Object.entries(pages).filter(([path, meta]: [string, any]) => !meta.isChild).map(([path, meta]: [string, any]) => {const compPath = path.replace('page.ts', 'index.vue')path = path.replace('../pages', '').replace('/page.ts', '') || '/';const name = path.split('/').filter(Boolean).join('-') || 'index';return {path,name,component: components[compPath],meta: meta,children: !!meta.childrens ? getChildRoutes(meta.childrens) : []} as RouteRecordRaw
})const router = createRouter({history: createWebHistory(),routes: routes,
})//路由重定向
router.beforeEach((to, from, next) => {if (to.path === '/') {next('/home')} else if (!routes.some(route => route.path === to.path)) {next('/home')} else {next()}})export {router
}

效果展示：