vue 路由中 vite 与webpack 动态 导入的方法汇总

vite 动态导入路由:

router/index.js文件

javascript 复制代码
//vite 下面寻找 views 文件夹下面所有的page.js文件
let pageList = import.meta.glob('../views/**/page.json', {
  eager: true,
  import: 'default',
});
//所有的文件
const modules = import.meta.glob('../views/**/**.vue');

//遍历
let pages = Object.entries(pageList).map(([path, meta]) => {
  let pathName = path.slice(8, -10);
  let name = pathName.slice(1).split('/').join('-');
  let fileName = path.slice(0, -10);
  let fixFileName = fileName.split('/').pop();
  let filePath = fileName + '/' + fixFileName + '.vue';

  return {
    path: pathName,
    name: name,
    component: modules[filePath],
    meta,
  };
});

 routes: [
    {
      path: '/',
      name: 'layout',
      redirect: '/home',
      component: () => import('../components/layout/layout.vue'),
      meta: {
        title: '首页',
      },
      children: pages,
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('../views/login.vue'),
      meta: {
        title: '登录',
      },
    },
  ],

以下是 截图:

这个是webpack 动态导入路由:

javascript 复制代码
//读取配置文件
const context = require.context('../components/page', true, /\.json$/);
//读取路由文件
const contextVue = require.context('../components/page', true, /\.vue$/);

let fileObj = {};
//动态读取文件
contextVue.keys().map(key => {
    let keyName = key.slice(1);
    fileObj[keyName] = contextVue(key).default;
});

let routerPathArr = [];
//动态配置路由
context.keys().forEach(key => {
    let obj = context(key);
    let compKey = obj['componentPath'];
    let routeObj = {
        path: obj['path'],
        name: obj['name'],
        component: fileObj[compKey],
        meta: obj['meta']
    };
    routerPathArr.push(routeObj);
});

以下是截图:

相关推荐
第七种黄昏4 分钟前
前端面试-箭头函数
前端·面试·职场和发展
Youyzq5 分钟前
前端box-shadow出现兼容性问题如何处理
前端
携欢13 分钟前
PortSwigger靶场之将 XSS 存储到onclick带有尖括号和双引号 HTML 编码以及单引号和反斜杠转义的事件中通关秘籍
前端·html·xss
三小河21 分钟前
工作中的Ai工具汇总
前端
mapbar_front39 分钟前
react项目开发—关于代码架构/规范探讨
前端·react.js
二木一夕1 小时前
Vue 3 的组合式 API和传统选项式 API区别(vue2转vue3,两者差异)
前端
LuckySusu1 小时前
【vue篇】Vue 项目中的静态资源管理:assets vs static 终极指南
前端·vue.js
LuckySusu1 小时前
【vue篇】Vue.delete vs delete:数组删除的“陷阱”与正确姿势
前端·vue.js
LuckySusu1 小时前
【vue篇】Vue 模板编译原理:从 Template 到 DOM 的翻译官
前端·vue.js
小菜摸鱼1 小时前
Node.js + vue3 大文件-切片上传全流程(视频文件)
前端·node.js