vue-路由自动化

Router

介绍

工程中的Router会根据src/views目录结构自动生成路由配置，路由结构与文件系统结构保持一致，不需要手动编写routes = [...]，使得项目结构更加直观和易于理解。

配置

配置文件：

 router└─ index.ts

import {createRouter, createWebHistory, RouteRecordRaw} from "vue-router";const ps = import.meta.glob("../views/**/page.ts", {eager: true, import: 'default'})
const cs = import.meta.glob("../views/**/index.vue")
const re: string[] = []
function createChildRoutes(basePath: string): RouteRecordRaw[] {const pObjs = Object.entries(ps)const routes: RouteRecordRaw[] = pObjs.filter(([path]) => {return path.startsWith(basePath) && path.split('/').length === basePath.split('/').length + 1;}).map(([path, params]) => {return createRoutes(path, params, (path) => {path = path.replace('../views', '').replace('/page.ts', '').replace('[', ':').replace(']', '')const name = path.replace(':', '').split('/').filter(Boolean).join('-') || 'index'const pathArr =  path.split('/')const routePath = pathArr[pathArr.length - 1]re.push(name)return [routePath, name]})})return routes;
}function createRoutes(path: string, params: Record<string, any> | CustomRouterParams, getRoutePath: ((path: string) => string[])) {const compKey = path.replace('page.ts', 'index.vue')const [routePath, name] = getRoutePath(path)const data = params as Record<string, any> as CustomRouterParamsconst chs: RouteRecordRaw[] = [];if (routePath !== '/') {chs.push(...createChildRoutes(path.replace('page.ts', '')))}if (chs.filter((child) => child.path.startsWith('_')).length > 1) {throw new Error(`${path} 默认路由配置错误`)}const cd = chs.find((child) => child.path.startsWith('_'))if (cd) {const defaultRoute: RouteRecordRaw  = {...cd, path: ''}chs.push(defaultRoute)cd.path = cd.path.replace('_', '')if (cd.name) {cd.name = (cd.name as string).replace('_', '')}}const source = {...data,...(chs.length > 0 && { children: chs })};return {...source,path: routePath,name: name,component: cs[compKey],} as RouteRecordRaw;
}const routers: RouteRecordRaw[] = Object.entries(ps).map(([path, params]) => {return createRoutes(path, params, (path) => {const routePath =  path.replace('../views', '').replace('/page.ts', '').replace('[', ':').replace(']', '') || '/'const name = routePath.replace(':', '').split('/').filter(Boolean).join('-') || 'index'return [routePath, name]})
})const finalRouters = routers.filter(r => !re.includes(r.name as string))
export const router = createRouter({history: createWebHistory(), routes: finalRouters})

配置文件负责根据目录结构自动生成路由配置，目前支持的功能如下：

  • 生成基础配置项：path、name、component
  • 支持动态路由
  • 支持嵌套路由
  • 支持嵌套路由默认显示某个子路由
  • 支持重定向
  • 支持props传递给路由组件
  • 支持自定义路由元信息
  • 暂不支持命名视图和路由别名

只需关注目录结构，不需要关注此配置文件。

目录结构约定

即views目录约定规范

基础约定

一个路由以index.vue和page.ts文件组成,二者缺一不可，index.vue为路由组件，page.ts为该路由的配置项。每个文件夹只存放一个路由。

views├─ user|   └─ message|         ├─ index.vue|         └─ pages.ts├─ index.vue└─ pages.ts

以上文件目录示例生成路由为：

const routers = [{path: '/',component: () => import('@/views/index.vue'),name: 'index',// 其他配置项从pages中取出},{path: '/user/message',component: () => import('@/views/message/index.vue'),name: 'user-message',// 其他配置项从pages中取出},
]
  • 路由组件文件的路径即为path属性值，views为根目录'/'，如上示例中目录结构views/user/message/index.vue,转path为：/user/message。(如果被判定为嵌套路由则path: message，详见嵌套路由)
  • path属性值去掉'/'并以'-'相连形成路由名称，如上示例中目录结构views/user/message/index.vue,转name为：user-message,根路径默认name:'index'。
动态路由

动态路由以[words]形式命名文件夹，如：文件夹名称[id]。

views└─ user└─ [id]├─ index.vue└─ pages.ts

以上文件目录示例生成路由为：

const routers = [{path: '/user/:id',component: () => import('@/views/user/[id]/index.vue'),name: 'user-id',// 其他配置项从pages中取出},
]
  • 如上示例中目录结构views/user/[id]/index.vue,转path为：/user/:id。(如果被判定为嵌套路由则path: ':id'，详见嵌套路由)
  • 如上示例中目录结构views/user/[id]/index.vue,转name为：user-id。
嵌套路由

嵌套路由判定规则：当前目录下存在路由组件文件时，下一级的所有路由组件文件都判定为子路由。（'/'除外）

views└─ user├─ [id]|    ├─ index.vue|    └─ pages.ts  ├─ index.vue└─ pages.ts

以上文件目录示例生成路由为：

const routers = [{path: '/user',component: () => import('@/views/user/index.vue'),name: 'user',// 其他配置项从pages中取出children: [{path: ':id',component: () => import('@/views/user/[id]/index.vue'),name: 'user-id',// 其他配置项从pages中取出}]},
]
  • 如上示例中目录结构，[id]文件夹下的路由作为子路由填充到父路由的children属性。
  • 如上示例中目录结构，子路由的path属性为:id，即父路由的相对路径。
嵌套路由默认子路由

在子路由文件夹名称以单个下划线'_'开头为默认子路由。

views└─ user├─ _u1|   ├─ index.vue|   └─ pages.ts  ├─ u2|   ├─ index.vue|   └─ pages.ts  ├─ index.vue└─ pages.ts

以上文件目录示例生成路由为：

const routers = [{path: '/user',component: () => import('@/views/user/index.vue'),name: 'user',childern: [{path: '',component: () => import('@/views/user/_u1/index.vue'),name: 'user-_u1',},{path: 'u1',component: () => import('@/views/user/_u1/index.vue'),name: 'user-u1',},{path: 'u2',component: () => import('@/views/user/_u2/index.vue'),name: 'user-u2',},]// 其他配置项从pages中取出},
]
  • 默认子路由的name属性值会保留'_'下划线与区别其他路由，防止路由名称重复。
  • 最多只允许设置一个默认子路由，如果设置数量大于1，会抛出异常。异常信息：${path} 路由配置错误，'_'开头的默认子路由只能有一个

设置配置项

vue_template├─ src├─ ...└─ global.d.ts
  • global.d.ts文件是TypeScript项目中的一个全局类型声明文件。它用于声明全局变量、模块、接口或其他类型，使得这些声明在整个项目中都可以被访问，而无需显式导入。
  • global.d.ts文件中声明了可以对路由设置的配置项，如下：
interface CustomRouterParams {meta: {title: stringmenuOrder?: number}props?: boolean | Record<string, unknown> | ((route: any) => Record<string, unknown>)redirect?: string | Record<string, unknown> | ((to: any) => string | Record<string, unknown>)
}
  • meta：路由元信息，可根据项目需求增加meta中的属性
  • props： 路由组件的props传递
  • redirect: 重定向

目录结构：

views├─ user|  ├─ index.vue|  └─ pages.ts├─ index.vue└─ pages.ts

views/pages.ts文件：

const pageConfig: CustomRouterParams = {meta: {title: 'home',},props: {name: 'tom', age: 20},// props: true | props: {name: 'tom', age: 20} | props: route => ({ id: route.params.id }) redirect: '/user' // redirect: '/user' | redirect: {name: user} | redirect: to => {path: '/user', query: {q: to.query.search}} | ......
};
export default pageConfig;

生成的路由如下：

const routers = [{path: '/',component: () => import('@/views/index.vue'),name: 'index',meta: {title: 'home'},props: {name: 'tom', age: 20}, // props: true | props: {name: 'tom', age: 20} | props: route => ({ id: route.params.id })redirect: '/user' // redirect: '/user' | redirect: {name: user} | redirect: to => {path: '/user', query: {q: to.query.search}} | ......},{path: '/user',//.......//.......},
]

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

mybatis用注解替换xml,不再写.xml了

mybatis用注解替换xml,不再写.xml了

在Service里引用Autowiredprivate DemoMapper demoMapper;下面展示一些 DemoMapper.java代码片。 public interface DemoMapper{/*** 查询页面信息-根据ID*/Select("select * from program where id #{id}")Program getById(Long id);/*** 新增*/Insert({"<…
阅读更多...
电竞玩家的云端盛宴！四大云电脑平台：ToDesk、顺网云、青椒云、极云普惠云实测大比拼

电竞玩家的云端盛宴！四大云电脑平台：ToDesk、顺网云、青椒云、极云普惠云实测大比拼

本文目录 一、云电脑概念及市场需求二、云电竞性能测试2.1 ToDesk云电脑2.2 顺网云2.3 青椒云2.4 极云普惠云电脑 三、四大云电脑平台综合配置对比3.1 CPU处理器3.2 GPU显卡3.3 内存 四、总结 一、云电脑概念及市场需求 在数字化时代的推动下&#xff0c;云计算技术日益成熟&a…
阅读更多...
关于嵌入式系统中的LED控制程序的一篇爽文

关于嵌入式系统中的LED控制程序的一篇爽文

嵌入式系统中的LED控制程序 在嵌入式系统中控制LED是一个很常见的任务&#xff0c;可以用于指示状态、显示信息等。我们将使用C语言编写一个简单的LED控制程序&#xff0c;该程序将控制一个虚拟的LED&#xff0c;但可以根据需要将其扩展到实际的硬件上。 准备工作 在开始之前…
阅读更多...
深入理解 Cowboy WebSocket：使用 Erlang/OTP 构建高效的即时通讯(IM)应用

深入理解 Cowboy WebSocket：使用 Erlang/OTP 构建高效的即时通讯(IM)应用

深入理解 Cowboy WebSocket&#xff1a;使用 Erlang/OTP 构建高效的即时通讯(IM)应用 引言 实时通信技术在现代 Web 应用中扮演着核心角色&#xff0c;而 WebSocket 作为其中的关键技术&#xff0c;已成为即时通讯(IM)系统不可或缺的一部分。Cowboy&#xff0c;这个基于 Erla…
阅读更多...
2024QS世界大学学科排名（各学科详细）

2024QS世界大学学科排名（各学科详细）

2024QS全球高校学科排名附榜单&#xff1a; 人文与艺术相关学科全球Top10 社会科学与管理相关学科全球Top10 自然科学相关学科全球Top10 工程与技术相关学科全球Top10 生命科学与医学相关学科全球Top10
阅读更多...
Flutter 是如何实现的 ？

Flutter 是如何实现的 ？

Flutter 是由 Google 开发的一个开源 UI 软件开发工具包&#xff0c;用于构建跨平台的应用程序。Flutter 的核心理念是提供一个高度可定制、快速和现代的 UI 框架&#xff0c;它允许开发者使用一套代码库构建 Android、iOS、Web 和桌面应用程序。以下是 Flutter 的一些关键实现…
阅读更多...
【基于R语言群体遗传学】-14-种群起源的相对似然

【基于R语言群体遗传学】-14-种群起源的相对似然

我们可以将预测的基因型比例视为在种群中看到一组特定等位基因的概率。如果种群在等位基因频率上存在差异&#xff0c;我们可以使用基因型来推断个体起源于每个种群的相对可能性。大家可以先看一下之前的博客&#xff1a;群体遗传学_tRNA做科研的博客-CSDN博客 种群起源的相对似…
阅读更多...
Python OpenCV 教学取得视频资讯

Python OpenCV 教学取得视频资讯

这篇教学会介绍使用OpenCV&#xff0c;取得影像的长宽尺寸、以及读取影像中某些像素的颜色数值。 因为程式中的OpenCV 会需要使用镜头或GPU&#xff0c;所以请使用本机环境( 参考&#xff1a;使用Python 虚拟环境) 或使用Anaconda Jupyter 进行实作( 参考&#xff1a;使用Anaco…
阅读更多...
基于Python的51job招聘数据采集与可视化项目实践

基于Python的51job招聘数据采集与可视化项目实践

项目背景与目标 在当今竞争激烈的就业市场中&#xff0c;深入分析招聘信息对于求职者和企业都具有重要意义。基于Python的51job招聘数据采集与可视化项目旨在通过自动化手段高效获取大量招聘信息&#xff0c;并对这些数据进行深度分析和展示。 51job作为中国领先的招聘网站&…
阅读更多...
RockyLinux9上安装Nacos2.3.0（非Docker安装）

RockyLinux9上安装Nacos2.3.0（非Docker安装）

RockyLinux9上安装Nacos2.3.0 说明什么是Nacos下载并安装创建一个nacos-conf数据库修改application.properties文件 启动访问网址查看是否成功 开启访问鉴权 说明 本文采用的是&#xff1a;安装包安装&#xff0c;非Docker安装&#xff0c;系统采用的Rocky Linux9.4。   当前…
阅读更多...
C++ 【 Open3D 】 读取、可视化并保存点云

C++ 【 Open3D 】 读取、可视化并保存点云

一、读取常见点云 #include <iostream> #include <Open3D/Open3D.h>int main(int argc, char* argv[]) {std::string fileName("hand.pcd");auto cloud_ptr std::make_shared<open3d::geometry::PointCloud>();if (open3d::io::ReadPointCloud(f…
阅读更多...
警钟！电池储能安全事故频发！物联网技术如何加强储能安全排查？

警钟！电池储能安全事故频发！物联网技术如何加强储能安全排查？

在新能源时代背景下&#xff0c;储能系统作为能源转型的关键支撑技术&#xff0c;其安全问题日益凸显&#xff0c;尤其是近期海外电池项目连续发生的事故&#xff0c;为全球储能行业敲响了警钟。面对这一挑战&#xff0c;物联网技术以其强大的数据采集、智能分析与远程监控能力…
阅读更多...
Python基础知识——（002）

Python基础知识——（002）

文章目录 P8——7. input函数的使用 基本的输入函数input P9——8. Python中的注释 P10——9. Python中的缩进与本章总结 本章总结 P11——10. 章节习题 P8——7. input函数的使用 基本的输入函数input 语法结构&#xff1a; x input(提示文字) 注意事项&#xff1a;无论输…
阅读更多...
PMON的解读和开发

PMON的解读和开发

提示&#xff1a;龙芯2K1000PMON相关记录 文章目录 1 PMON的发展和编译环境PMONPMON2000 2 PMON2000的目录结构3 Targets目录的组成4 PMON编译环境的建立5 PMON2000的框架6 异常向量表7 Pmon的空间分配8 PMON的汇编部分(starto.S或sbdreset.S)的解读Start.SC代码部分dbginit 9 …
阅读更多...
【Adobe】Adobe Dimension 3D渲染和设计软件

【Adobe】Adobe Dimension 3D渲染和设计软件

一、Adobe Dimension软件介绍 1. 软件背景与功能 Adobe Dimension最初于1994年推出&#xff0c;最初称为“QuarkXPress 3D”&#xff0c;后逐渐发展为现在的Adobe Dimension。作为Adobe Creative Suite的一部分&#xff0c;Dimension与其他Adobe创意软件&#xff08;如Photos…
阅读更多...
点云曲面提取

点云曲面提取

csdn是不是有有什么大bing&#xff1f;gif只能上传5m我吐了在线GIF动图压缩 - docsmall 在线GIF动图压缩工具,在线GIF动图压缩软件 代码整理中
阅读更多...
单元测试Spring 上下文加载过程中遇到的阻塞或死锁问题

单元测试Spring 上下文加载过程中遇到的阻塞或死锁问题

IDEA单元测试一直转圈&#xff0c;阻塞&#xff0c;前置后置的方法都不执行&#xff0c;无任何输出 1.单元测试类 SpringBootTest(classes {BareMetalApplication.class}) RunWith(SpringRunner.class) public class K8sUserNfsStoreInitServiceImplTest {BeforeEachpublic…
阅读更多...
全域数据处理

全域数据处理

#!/usr/bin/env python # coding: utf-8# In[6]:# encoding=utf-8 # encoding=utf-8 import pandas as pd import numpy as np import re import time import subprocess,sys #import logging from operator import itemgetter import os import logging定义一个类，用于下文…
阅读更多...
【结构性型模式-适配器模式】

【结构性型模式-适配器模式】

定义 将一个类的接口转换成客户希望的另外一个接口&#xff0c;使得原本由于接口不兼容而不能一起工作的那些类能一起工作。 适配器模式分为类适配器模式和对象适配器模式&#xff0c;前者类之间的耦合度比后者高&#xff0c;且要求程序员了解现有组件库中的相关组件的内部结…
阅读更多...
基于Java+SpringMvc+Vue技术的图书管理系统的设计与实现(60页论文参考)

基于Java+SpringMvc+Vue技术的图书管理系统的设计与实现(60页论文参考)

博主介绍&#xff1a;硕士研究生&#xff0c;专注于Java技术领域开发与管理&#xff0c;以及毕业项目实战✌ 从事基于java BS架构、CS架构、c/c 编程工作近16年&#xff0c;拥有近12年的管理工作经验&#xff0c;拥有较丰富的技术架构思想、较扎实的技术功底和资深的项目管理经…
阅读更多...
最新文章

Copyright @ 2022~2023