vue动态配置路由

news2024/11/24 17:24:43

文章目录

  • 前言
  • 定义项目页面格式
  • 一、vite 配置动态路由
    • 新建 `/router/utils.ts`
    • 引入 `/router/utils.ts`
  • 二、webpack 配置动态路由
  • 总结
    • `如有启发,可点赞收藏哟~`


前言

项目中动态配置路由可以减少路由配置时间,并可减少配置路由出现的一些奇奇怪怪的问题
路由配置化可统一定义相关属性等
本文记录vitewebppack两种构建工具配置动态路由,


定义项目页面格式

页面定义最好同时定义对应的titlename

  • 以views目录的page-template为例

在这里插入图片描述

  • page-template/index.ts文件
import { defineComponent, h, defineAsyncComponent } from 'vue';

const PageComponent = defineAsyncComponent(() => import('./components/index.vue'));

export default defineComponent({
  // 配置后可在 动态获取路由配置中设置对应值
  title: '页面模版',
  name: 'PageTemplate',
  setup() {
    return () => h(PageComponent);
  },
});
  • page-template/components/index.ts文件
import { defineComponent } from 'vue'
export default defineComponent({
  setup() {
    return {
    };
  },
});

  • page-template/components/index.vue文件
<script lang="ts" src="./index.ts" />

<template>
  <div>template</div>
</template>

<style scoped lang="less"></style>

一、vite 配置动态路由

vite使用import.meta.glob动态获取文件

新建 /router/utils.ts

/**
 * 路由配置文件
 */

import { DEFAULT_DOCUMENT_TITLE } from '@/const/base';
import type { RouteRecordRaw } from 'vue-router';


function getComponent() {
  return import.meta.glob('../views/**/index.ts', { eager: true });
}

// 获取路由文件
export const vueRouters = (): RouteRecordRaw[] => {
  const routerList: RouteRecordRaw[] = [];
  const files = getComponent();
  Object.keys(files).forEach((fileSrc: string) => {
    const component = files[fileSrc] as any;
    const componentPath = fileSrc.replace(/^\.\//, '');
    const routerPath = componentPath.replace('../views', '').replace(/\/index.ts$/, '');
    if (!componentPath.includes('components')) {
      routerList.push({
        path: routerPath,
        name: component.default.name,
        component: () => import(/* @vite-ignore */componentPath),
        meta: {
          title: component.default.title || DEFAULT_DOCUMENT_TITLE,
          // skeleton: component.skeleton, // TODO 待处理页面骨架屏
          // background: component.backgroundColor, // TODO 待处理页面级别颜色
        },
      });
    }
  });

  return routerList;
};

引入 /router/utils.ts

/router/index.ts

import { createRouter, createWebHistory } from "vue-router";
import HomeView from "@/views/layout/index";
import { vueRouters } from "./utils";


const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    ......vueRouters()
  ],
});
export default router;

在这里插入图片描述

二、webpack 配置动态路由

webpack使用require.context获取文件路径

  • /router/utils.ts
/**
 * 路由配置文件
 */

import { DEFAULT_DOCUMENT_TITLE } from '@/const/base';
import type { RouteRecordRaw } from 'vue-router';

function getComponent() {
  return require.context('../views', true, /\.ts$/);
}

// 获取路由文件
export const vueRouters = (): RouteRecordRaw[] => {
  const routerList: RouteRecordRaw[] = [];
  const requireRouters = getComponent();
  requireRouters.keys().forEach((fileSrc: string) => {
    const viewSrc = requireRouters(fileSrc);
    const component = viewSrc.default;
    const componentPath = fileSrc.replace(/^\.\//, '');
    const routerPath = componentPath.replace(/(\S+)index.ts$/, '/$1index.html');

    if (component.name !== 'Home' && !component.isOffLine) {
      routerList.push({
        path: routerPath,
        name: component.name,
        component: () => import(`@/views/${componentPath}`),
        meta: {
          title: component.title || DEFAULT_DOCUMENT_TITLE,
        },
      });
    }
  });

  return routerList;
};

export default vueRouters();

使用同vite


总结

vite 和 webpack 不同于获取文件格式,获取后的操作基本一致

如有启发,可点赞收藏哟~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1229926.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

如何将文字、图片、视频、链接等内容生成一个二维码?

通过二维彩虹的【H5编辑】功能&#xff0c;就可以将文字、图片、视频、文件、链接等多种格式的内容编辑在一个页面&#xff0c;然后生成一个自定义的二维码——H5编辑二维码。扫描后&#xff0c;即可查看二维码中的详细图文视频等内容了。这个功能大受欢迎&#xff01; 这个H5…

深度学习之基于CT影像图像分割检测系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 基于CT影像的图像分割检测系统可以被设计成能够自动地检测出CT图像中的病变部位或解剖结构&#xff0c;以协助医生进…

庖丁解牛:NIO核心概念与机制详解 05 _ 文件锁定

文章目录 Pre概述锁定文件 &#xff08;lock&#xff09;Code文件锁定和可移植性 Pre 庖丁解牛&#xff1a;NIO核心概念与机制详解 01 庖丁解牛&#xff1a;NIO核心概念与机制详解 02 _ 缓冲区的细节实现 庖丁解牛&#xff1a;NIO核心概念与机制详解 03 _ 缓冲区分配、包装和…

calibre更新 环境变量设置

我这里是从别的地方copy过来的calibre&#xff0c;所以不用安装。 如果需要安装请参考&#xff1a; Caibre2022.3_17版本安装及遇到问题 - 梅希的日志 - EETOP 创芯网论坛 (原名&#xff1a;电子顶级开发网) -将copy过来的calibre放在原来calibre的位置。 打开工作路径下的.b…

【Vue】Vue3 超简单拖拽条动态修改容器宽度

demo 代码 const leftBoxWidth ref(200); // 默认宽度 const leftResize (e: MouseEvent) > {const startX e.clientX;const startWidth leftBoxWidth.value;const mouseMove (documentE: MouseEvent) > {// 80 是左侧菜单宽度leftBoxWidth.value startWidth docu…

不懂找伦敦银趋势?3个方法搞定

趋势是我们的朋友&#xff0c;但是这个朋友却很喜欢跟我们开玩笑&#xff0c;如果我们不留意&#xff0c;根本发觉不了它的存在。怎么找到趋势本体并且和它做个好朋友呢&#xff1f;下面我们就来介绍三个方法。 数波段的高点和低点。我们以当前的市场波动价格为轴&#xff0c;向…

快手运营的必备的10个工具

一、引言 快手作为短视频领域的佼佼者&#xff0c;为众多创作者提供了广阔的舞台。要想在快手运营中取得成功&#xff0c;掌握一些必备的工具是必不可少的。本文将为您介绍快手运营的10个必备工具&#xff0c;帮助您提高工作效率&#xff0c;优化内容创作。 二、工具推荐 1. …

现货白银MACD实战分析例子

MACD这个技术指标的全称是平滑异同移动平均线&#xff0c;主要表示经过平滑处理后均线的差异程度&#xff0c;一般用来研判现货白银价格变化的方向、强度和趋势。MT4中的MACD指标&#xff0c;主要是由信号线、&#xff08;上升/下跌&#xff09;动能柱、0轴这三部分组成。 MACD…

键盘映射笔记

dumpkeys命令用于显示当前系统中定义的键盘映射表。它可以帮助用户查看和理解系统中的键盘布局和键盘映射规则。 当用户执行dumpkeys命令时&#xff0c;它会读取系统中的键盘映射表文件&#xff08;通常是/etc/keymaps或/etc/console/boottime.kmap.gz&#xff09;&#xff0c;…

chatglm-6B模型下载

从huggingface上面下载chatglm-6B模型是比较简捷的方式&#xff0c;下面记录一下下载安装过程。 huggingface的官方文档如下&#xff1a; https://huggingface.co/docs/huggingface_hub/v0.14.0.rc1/guides/download 1.配置conda环境 服务器上使用的是miniconda&#xff0c;…

如何在公网环境下使用笔记本的Potplayer访问本地群晖webdav中的影视资源

文章目录 如何在公网环境下使用笔记本的Potplayer访问本地群晖webdav中的影视资源**那么问题来了&#xff0c;potplayer只能局域网内访问资源&#xff0c;那我不在家中怎么看本地电影&#xff1f;** 本教程解决的问题是&#xff1a;按照本教程方法操作后&#xff0c;达到的效果…

什么是域欺骗?域欺骗的主要类型有哪些?

域欺骗是指网络犯罪分子假冒网站名称或电子邮件域来欺骗用户。域欺骗的目的是将恶意电子邮件或网络钓鱼网站伪装成合法电子邮件或网站&#xff0c;诱使用户与之交互。域欺骗就像骗子一样&#xff0c;向人们展示伪造的凭据以获得信任&#xff0c;然后再利用其获得好处。 域欺骗…

【PCB学习】几种接地符号

声明 该图并非原创&#xff0c;原文出处不可考&#xff0c;因此在这里附加说明。 示意图

在vue-cli中快速使用webpack-bundle-analyzer

webpack-bundle-analyzer 是一个可视化资源分析工具&#xff0c;可以直观地分析打包出的文件有哪些&#xff0c;及它们的大小、占比情况、各文件 Gzip压缩后的大小、模块包含关系、依赖项等。 从vue-cli官方的更新记录可以看到&#xff0c;从vue-cli3开始集成report命令 当前环…

IIC总线逻辑

一、 我们习以为常的IIC通常是什么样子&#xff1f; 在我们研发/应用工程师眼中&#xff0c;IIC的形象通常是如图这样的吧&#xff1f;&#xff08;你们说是不是&#xff1f;&#xff09; 是的&#xff0c;对于理想的硬件调程序&#xff0c;这个层…

利用JDBC及Servlet实现对信息录入注册功能的实现

利用JDBC及Servlet实现对登录注册功能的实现&#xff1b; 1.题目要求&#xff1a; 1、新建一个数据库名为&#xff08;个人姓名拼音&#xff09;&#xff0c;表&#xff08;学生所在城市&#xff09;&#xff0c;字段&#xff08;sid&#xff1a;学号&#xff0c;sname&#x…

如何通过cpolar内网穿透工具实现远程访问本地postgreSQL

文章目录 前言1. 安装postgreSQL2. 本地连接postgreSQL3. Windows 安装 cpolar4. 配置postgreSQL公网地址5. 公网postgreSQL访问6. 固定连接公网地址7. postgreSQL固定地址连接测试 前言 PostgreSQL是一个功能非常强大的关系型数据库管理系统&#xff08;RDBMS&#xff09;,下…

vue中使用echarts渐变柱状图 Cannot read properties of undefined (reading ‘graphic‘)解决方法

在使用渐变颜色时报错&#xff0c;Cannot read properties of undefined (reading ‘graphic’) echarts也下载了&#xff0c;引入了&#xff0c;就是报错&#xff0c;用不了new charts&#xff0c; 结果换了一个版本号就可以了&#xff0c;本来用的"echarts": "…

win10家庭版系统远通过一根网线程连接另一台机器

用网线连接两个机器 打开cmd命令行 输入ipconfig&#xff0c;查看 复制 IPv4地址 打开 远程桌面 程序 点击连接 输入在另外一机器设置好的用户名和密码即可

CMMI之项目管理类核心框架

项目管理类过程域涵盖了与项目的计划、监督和控制相关的项目管理活动。 CMMI-DEV 中的七个项目管理类过程域是&#xff1a; • 集成项目管理&#xff08;Integrated Project Management&#xff0c; IPM&#xff09; • 项目监督与控制&#xff08;Project Monitoring and Cont…