快捷導(dǎo)航

如何用vite動(dòng)態(tài)導(dǎo)入vue的路由配置詳解

更新時(shí)間：2025年04月29日 08:27:16 作者：星極天下第一

這篇文章主要介紹了如何用vite動(dòng)態(tài)導(dǎo)入vue的路由配置的相關(guān)資料,動(dòng)態(tài)導(dǎo)入路由模仿了uniapp的頁(yè)面配置文件結(jié)構(gòu),文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

在Vue應(yīng)用中，通過(guò)路由可以實(shí)現(xiàn)不同頁(yè)面之間的切換，同時(shí)也可以實(shí)現(xiàn)頁(yè)面之間的傳參和控制頁(yè)面的顯示與隱藏。但是我們?cè)陂_(kāi)發(fā)的過(guò)程中，會(huì)發(fā)現(xiàn)在路由配置中的路由配置和我們的項(xiàng)目結(jié)構(gòu)高度重復(fù)，在我們修改頁(yè)面文件結(jié)構(gòu)時(shí)非常的麻煩與復(fù)雜，這時(shí)候，如果可以動(dòng)態(tài)的導(dǎo)入路由，就可以大大提示我們項(xiàng)目的可維護(hù)性。

我們?cè)陂_(kāi)發(fā)中會(huì)經(jīng)常聽(tīng)見(jiàn)一句話(huà)，約定大于配置，路由的動(dòng)態(tài)導(dǎo)入也是這句話(huà)應(yīng)用的一種，我們這里動(dòng)態(tài)導(dǎo)入路由模仿了在uniapp進(jìn)行小程序開(kāi)發(fā)的頁(yè)面配置文件，要求有以下幾點(diǎn)：

所有的頁(yè)面都必須配置到/src/pages文件夾下；
所有的頁(yè)面文件層級(jí)必須是/src/pages/頁(yè)面文件夾名稱(chēng)/；
所有的頁(yè)面文件中必須有page.ts作為配置文件和index.vue作為頁(yè)面入口文件；

結(jié)構(gòu)展示如下：

page.ts文件展示：

//home的page.ts
export default {
  title: '首頁(yè)',
  menuOrder: 1,
  childrens: [
    `../pages/homechildren`
  ]
}

//homechildren的page.ts
export default {
  title: '首頁(yè)的子組件',
  menuOrder: 1,
  isChild: true,
}

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

此時(shí)我們要通過(guò)vite的函數(shù)import.meta.glob()和import()掃描pages文件夾動(dòng)態(tài)生成路由，代碼如下：

//路由配置文件
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
}

效果展示：

路由對(duì)象展示：

總結(jié)

到此這篇關(guān)于如何用vite動(dòng)態(tài)導(dǎo)入vue的路由配置的文章就介紹到這了,更多相關(guān)vite動(dòng)態(tài)導(dǎo)入vue路由配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: