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

vue实现自动生成路由,非手动创建,含避坑点

自动生成路由js文件:autoRouter.js

let routeArr = [];
let baseUrl = '@/components/settingManagement/';
const content = require.context('../components/settingManagement/', true, /\.vue$/);
content.keys().forEach(e => {const path = e.substring(e.indexOf('/'), e.lastIndexOf('.'));const text = e.substring(e.lastIndexOf('/') + 1);const name = `${text.replace('.vue', '')}`;//额外信息,写到一个同名js文件里,动态引入let external = require(`@/components/settingManagement/${name}.js`);let routeObj = {path: path,name: name,// 避坑,动态导入静态资源时一定不要把整个路径当成变量component: () => import(`@/components/settingManagement/${text}`),// 额外信息填充meta: external.default};routeArr.push(routeObj);
});
export default routeArr;

额外补充信息js文件,与vue文件同目录,同名

const obj = { title: '示例页面标题' };
export default obj;

使用自动生成的路由

import routeArr from './autoRouter';
const router = new VueRouter({...routeArr
});
http://www.lryc.cn/news/177508.html

相关文章:

  • 数据挖掘note(赵老师语录)
  • 秋招在线人才测评考什么内容?
  • LeetCode算法二叉树—236. 二叉树的最近公共祖先
  • Qt事件处理
  • 宝塔nginx搭建Ftp文件服务器
  • SAP和APS系统订单BOM核对(SAP配置BOM攻略九)
  • ExcelServer EXCEL服务器使用- 用户、角色权限配置
  • JOSEF约瑟 静态中间继电器JZY-402 JZJ-404 AC220V 触点形式两开两闭
  • C#并发编程的实现方式
  • qemu源码下载和安装
  • 计算机,软件工程,网络工程,大数据专业毕业设计选题有哪些(附源码获取)
  • CyclicBarrier 、CountDownLatch 、Semaphore 的用法
  • RestTemplate发送HTTPS请求
  • 图像练习-矩形4点OpenCV(01)
  • 不同层设置不同学习率
  • 剑指offer32Ⅰ:从上到下打印二叉树
  • 【VUE复习·8】v-if;v-show高级
  • 线程同步需要注意什么?
  • 力扣算法题:35、搜索插入位置.java版
  • 七、热力图展示
  • 基于微信小程序的新闻发布平台小程序设计与实现(源码+lw+部署文档+讲解等)
  • 【论文阅读】Directional Connectivity-based Segmentation of Medical Images
  • 借“牛油果”爆款出圈,甜啦啦的底牌只是“价格”?
  • 【C语言】快速排序
  • Java列表查询Long(id)到前端转换出错
  • react import爆红
  • ThreeJS-3D教学三:平移缩放+物体沿轨迹运动
  • 玩玩“小藤”开发者套件 Atlas 200I DK A2 之VSCode远程连接
  • 安装python中tensorflow和keras==2.2.0的路程
  • Linux命令历史记录管理:使用history命令提高工作效率