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

Vue.js 嵌套路由和动态路由

news 来源：原创 2025/5/25 21:29:17

Vue.js 嵌套路由和动态路由

在 Vue.js 开发中，Vue Router 是官方提供的路由管理器，用于构建单页应用（SPA）。它支持嵌套路由和动态路由，帮助开发者构建复杂的应用结构。

嵌套路由

嵌套路由允许在路由配置中定义子路由，从而在组件中嵌套显示其他组件。这对于构建具有多层次结构的界面非常有用。

配置嵌套路由

定义父组件和子组件：

<!-- ParentComponent.vue -->
<template><div><h2>父组件</h2><router-view></router-view> <!-- 子路由组件将渲染在这里 --></div>
</template>

<!-- ChildComponent.vue -->
<template><div><h3>子组件</h3></div>
</template>

在路由配置中使用 children 属性定义嵌套路由：

import Vue from 'vue';
import VueRouter from 'vue-router';
import ParentComponent from './components/ParentComponent.vue';
import ChildComponent from './components/ChildComponent.vue';Vue.use(VueRouter);const routes = [{path: '/parent',component: ParentComponent,children: [{path: 'child',component: ChildComponent,},],},
];const router = new VueRouter({routes,
});export default router;

在上述配置中，访问 /parent/child 时，ParentComponent 中的 <router-view> 会渲染 ChildComponent。

动态路由

动态路由允许在路径中使用参数，从而匹配多个路由。这对于处理具有相似结构但内容不同的页面非常有用。

配置动态路由

定义动态路由：
```
const routes = [{path: '/user/:id',component: UserComponent,},
];
```
在上述配置中，/user/:id 中的 :id 是一个动态参数，可以匹配 /user/1、/user/2 等路径。

在组件中访问动态参数：

<!-- UserComponent.vue -->
<template><div><h2>用户 ID: {{ userId }}</h2></div>
</template><script>
export default {computed: {userId() {return this.$route.params.id;},},
};
</script>

通过上述配置，UserComponent 可以根据路由参数显示不同的内容。

总结

嵌套路由：通过在路由配置中使用 children 属性，可以在父组件中嵌套显示子组件，构建多层次的界面结构。
动态路由：通过在路径中使用动态参数（如 :id），可以匹配多个具有相似结构的路由，并在组件中根据参数显示不同的内容。
合理使用嵌套路由和动态路由，可以使 Vue.js 应用的路由配置更加灵活和强大。

Vue.js 嵌套路由和动态路由

Vue.js 嵌套路由和动态路由在 Vue.js 开发中，Vue Router 是官方提供的路由管理器，用于构建单页应用（SPA）。它支持嵌套路由和动态路由，帮助开发者构建复杂的应用结构。嵌套路由嵌套路由允许在路由配置中定义子路由…...

编程日记 2025/5/25 21:29:17

Docker导入镜像

使用命令行进行处理： docker load < onething1_wxedge.tar如下图所示查看状态 docker images...

编程日记 2025/5/23 17:34:20

C# OpenCV机器视觉:红外体温检测

在一个骄阳似火的夏日，全球却被一场突如其来的疫情阴霾笼罩。阿强所在的小镇，平日里熙熙攘攘的街道变得冷冷清清，人们戴着口罩，行色匆匆，眼神中满是对病毒的恐惧。阿强作为镇上小有名气的科技达人，看着这一…...

编程日记 2025/5/21 7:33:22

STM32项目分享：智能厨房安全检测系统

目录一、前言二、项目简介 1.功能详解 2.主要器件三、原理图设计四、PCB硬件设计 PCB图五、程序设计六、实验效果七、资料内容项目分享一、前言项目成品图片： 哔哩哔哩视频链接： STM32智能厨房安全检测系统 （资料分…...

编程日记 2025/5/24 15:39:20

docker 安装 redis 详解

在平常的开发工作中，我们经常会用到 redis，那么 docker 下应该如何安装 redis 呢？简单来说：第一步：拉取redis镜像；第二步：设置 redis.conf 配置文件；第三步：编写 docker-…...

编程日记 2025/5/25 1:17:28

《探秘鸿蒙Next：人工智能助力元宇宙高效渲染新征程》

在元宇宙的宏大愿景中，高效的渲染技术是构建沉浸式虚拟世界的关键。鸿蒙Next凭借与人工智能的深度融合，为元宇宙的渲染带来了全新的解决方案和无限可能。智能场景分析与优化人工智能能够对元宇宙场景进行智能分析。鸿蒙Next可以利用AI技术对场景中的…...

编程日记 2025/5/25 14:59:33

nginx分发请求超时切换服务

nginx的upstream模块实现超时自动切换服务 upstream testfail {server 192.168.1.218 max_fails1 fail_timeout10s;server 192.168.1.129 max_fails1 fail_timeout10s;} max_fails代表失败尝试次数，达到设置的次数则视为该服务不可用， fail_timeout代…...

编程日记 2025/5/23 18:46:41

vulfocus/fastjson-cnvd_2017_02833复现

漏洞概述 Fastjson 是阿里巴巴开发的一个高性能的 Java 库，用于将 Java 对象转换成 JSON 格式（序列化），以及将 JSON 字符串转换回 Java 对象（反序列化）。 fastjson在解析json的过程中,支持使用type字段来指…...

编程日记 2025/5/24 15:23:20

.Net Core微服务入门全纪录（五）——Ocelot-API网关（下）

系列文章目录 1、.Net Core微服务入门系列（一）——项目搭建 2、.Net Core微服务入门全纪录（二）——Consul-服务注册与发现（上） 3、.Net Core微服务入门全纪录（三）——Consul-服务注…...

编程日记 2025/5/22 21:24:37

OpenCV imread函数读取图像__实例详解

OpenCV imread函数读取图像__实例详解本文目录： 零、时光宝盒一、imread函数定义二、imread函数支持的文件格式三、imread函数flags参数详解 （3.1）、Flags-1时，样返回加载的图像（使用alpha通道，否…...

编程日记 2025/5/21 5:44:05

GPSd定时检测保活TCP GPS源

为了在 TCP GPS 源丢失连接时自动重新连接，可以编写一个监控脚本，定期检查 gpspipe 输出中的 TCP 源数据是否存在。如果检测到丢失，则使用 gpsdctl 或直接命令重新添加 TCP 源。 1、工具检查并安装必要工具，本例需要使用 gpspi…...

编程日记 2025/5/25 18:15:30

得物App亮相第七届进博会，科技赋能打造消费新热点

在2024年11月5日至11月10日举办的第七届进博会舞台上，上海交易团虹口分团表现亮眼，其中得物作为来自虹口品质电商的践行者，备受众多参观者关注。上海得物信息集团有限公司自2015年于上海虹口创立以来，始终坚守“满足年轻人对美好…...

编程日记 2025/5/16 10:40:32

单片机内存管理剖析

一、概述在单片机系统中，内存资源通常是有限的，因此高效的内存管理至关重要。合理地分配和使用内存可以提高系统的性能和稳定性，避免内存泄漏和碎片化问题。单片机的内存主要包括程序存储器（如 Flash）和数据存储器&a…...

编程日记 2025/5/21 14:00:07

用Python绘制一只懒羊羊

目录一、准备工作二、Turtle库简介三、绘制懒羊羊的步骤 1. 导入Turtle库并设置画布 2. 绘制头部 3. 绘制眼睛 4. 绘制嘴巴 5. 绘制身体 6. 绘制四肢 7. 完成绘制五、运行代码与结果展示六、总结在这个趣味盎然的技术实践中，我们将使用Python和Turtle图形…...

编程日记 2025/5/22 11:00:38

Python 预训练：打通视觉与大语言模型应用壁垒——Python预训练视觉和大语言模型

大语言模型是一种由包含数百亿甚至更多参数的深度神经网络构建的语言模型，通常使用自监督学习方法通过大量无标签文本进行训练，是深度学习之后的又一大人工智能技术革命。大语言模型的发展主要经历了基础模型阶段(2018 年到2021年)、能力探索阶段(2019年…...

编程日记 2025/5/24 17:01:22

神经网络梯度爆炸的原因及解决方案

在深度学习中，梯度爆炸（gradient exploding）是一种常见的训练问题，尤其是在深层神经网络中。梯度爆炸指的是在反向传播过程中，梯度值呈指数级增长，导致网络权重的大幅更新，从而使得网络变得不稳…...

编程日记 2025/5/24 16:19:06

WPS不登录无法使用基本功能的解决方案

前言 WPS不登录无法使用基本功能的原因通常是为了同步数据、提供更多高级功能或满足软件授权要求。‌然而，一些用户可能出于隐私或便捷性的考虑，不愿意登录账号。在这种情况下，WPS可能会限制未登录用户的使用权限，导致工具栏变灰…...

编程日记 2025/5/24 10:40:23

蓝桥杯lesson3---string的使用

🌈个人主页：羽晨同学 💫个人格言:“成为自己未来的主人~” string的概念 string字符串是一种更加高级的封装，string字符串中包含了大量的方法，这些方法使得字符串的操作变得更加简单，string的使用&…...

编程日记 2025/5/24 16:18:19

Java设计模式三工厂方法模式 (Factory Method Pattern)

工厂方法模式 (Factory Method Pattern) 是一种常见的创建型设计模式，旨在通过定义一个接口来创建对象，而将实例化对象的具体类延迟到子类中。工厂方法模式允许客户端通过工厂方法来创建对象，而不需要直接调用构造函数，这样可以减…...

编程日记 2025/5/22 17:39:23

日志收集Day005

1.filebeat的input类型之filestream实战案例: 在7.16版本中已经弃用log类型,之后需要使用filebeat,与log不同，filebeat的message无需设置就是顶级字段 1.1简单使用： filebeat.inputs: - type: filestreamenabled: truepaths:- /tmp/myfilestream01.lo…...

编程日记 2025/5/24 16:17:38

java开发，IDEA转战VSCODE配置（mac）

一、基本java开发环境配置前提：已经安装了jdk、maven、vscode，且配置了环境变量 1、安装java相关的插件 2、安装spring相关的插件 3、vscode配置maven环境打开 VsCode -> 首选项 -> 设置，也可以在setting.json文件中直接编辑&…...

编程日记 2025/5/22 10:34:27

Effective C++读书笔记——item23（用非成员，非友元函数取代成员函数）

一、主要观点： 在某些情况下，使用 non-member、non-friend 函数来替换 member 函数可以增强封装性和可扩展性，提供更好的软件设计。二、详细解释： 封装性： 类成员函数的封装性考量：成员函数可以访问类的…...

编程日记 2025/5/21 10:37:18

（3）STM32 USB设备开发-USB存储设备

例程：STM32USBdevice: 基于STM32的USB设备例子程序 - Gitee.com 本篇为使用芯片内部flash作为USB存储设备的例程，没有知识，全是实操，按照步骤就能获得一个STM32的U盘。本例子是在野火F103MINI开发板上验证的，如果代码…...

编程日记 2025/5/25 0:20:52

考研408笔记之数据结构（五）——图

数据结构（五）——图 1. 图的基本概念 1.1 图的定义 1.2 有向图和无向图在有向图中，使用圆括号表示一条边，圆括号里元素位置互换没有影响。在无向图中，使用尖括号表示一条边，尖括号里元素位置互换则表示…...

编程日记 2025/5/22 21:59:45

【博客之星】年度总结：在云影与墨香中探寻成长的足迹

🐇明明跟你说过：个人主页 🔖行路有良友，便是天堂🔖 目录一、年度回顾 1、创作历程 2、个人成长 3、个人生活与博客事业二、技术总结 1、赛道选择 2、技术工具 3、实战项目三、前景与展望 1、云原生未来…...

编程日记 2025/5/22 12:04:06

一、创建c文件 SoTest.h #pragma once class SoTest {int Add(int a,int b); };SoTest.cpp #include "SoTest.h"int SoTest::Add(int a, int b) {return a b; }二、创建so文件 /home/ubuntu/projects/SoTest/bin/x64/Debug/libSoTest.so 三、java代码 Maven依…...

编程日记 2025/5/24 16:03:35

简识JVM栈帧中的操作数栈

在JVM（Java虚拟机）中，栈帧（Stack Frame）是方法执行时的数据结构，用于存储局部变量、操作数栈、方法返回地址等信息。其中，操作数栈（Operand Stack）是栈帧中的一个重要组…...

编程日记 2025/5/23 7:40:32

在 Kubernetes 上快速安装 KubeSphere v4.1.2

目录标题安装文档配置repo安装使用插件安装文档在 Kubernetes 上快速安装 KubeSphere 配置repo export https_proxy10.10.x.x:7890 helm repo add stable https://charts.helm.sh/stable helm repo update安装 helm upgrade --install -n kubesphere-system --create-name…...

编程日记 2025/5/22 12:02:18

腾讯 Hunyuan3D-2：高分辨率3D 资产生成

腾讯 Hunyuan3D-2：高分辨率 3D 资产生成的突破前言在当今数字化时代，3D 资产生成技术正变得越来越重要。无论是游戏开发、影视制作还是虚拟现实领域，高质量的 3D 模型和纹理都是创造沉浸式体验的关键。然而，传统的 3D 资产制作…...

编程日记 2025/5/24 8:22:35

论文阅读--Qwen22.5技术报告

Qwen2 1 引言所有模型都是在超过7 trillion token（7万亿）的高质量、大规模数据集上预训练的 2 Tokenizer & Model 2.1 Tokenizer 沿用Qwen（Bai等人，2023a）的做法，我们采用了基于字节级字节对编码…...

编程日记 2025/5/23 23:52:09

python如何导出数据到excel文件

python导出数据到excel文件的方法： 1、调用Workbook()对象中的add_sheet()方法 wb xlwt.Workbook() ws wb.add_sheet(A Test Sheet) 2、通过add_sheet()方法中的write()函数将数据写入到excel中，然后使用save()函数保存excel文件 ws.write(0, 0, 1234…...

编程日记 2025/5/25 16:10:51

pyhton学习笔记（三）

目录 1.变量 2.变量的命名规则 3.常用函数汇总 4.常用数据类型汇总 5.算术运算符 6.比较运算符和逻辑运算符 7.常见的三种格式化输出方法 8.分支语句 1.变量变量就是可以变化的量，可以理解为是一个存储东西的盒子，盒子里面可以放一些程序里需要…...

编程日记 2025/5/25 6:41:32

时间类型数据处理：基于Python的datetime库和pandas库

一、datetime库常用方法日期的数据类型主要有两种：一是包含时间的datetime类型，二是不包含时间的date类型。这里的时间指具体的时、分、秒、甚至毫秒。 1、自定义日期、时间、获取本地时间、获取本地日期、获取年份、月份、月号、小时、分钟、秒、星期…...

编程日记 2025/5/25 20:13:21

CPU 缓存基础知识

并发编程首先需要简单了解下现代CPU相关知识。通过一些简单的图，简单的代码，来认识CPU以及一些常见的问题。目录 CPU存储与缓存的引入常见的三级缓存结构缓存一致性协议MESI协议缓存行 cache line 通过代码实例认识缓存行的重要性 CPU指令的乱序执行通过…...

编程日记 2025/5/22 1:17:02

vue3 中如何监听 props 中的值的变化

在 Vue 3 中，你可以使用 watch 函数来监听组件的 props 值的变化。watch 函数允许你观察一个或多个响应式数据源，并在这些数据源发生变化时执行回调函数。以下是一个示例，展示了如何在 Vue 3 中使用 watch 来监听 props 中的值的变化&#…...

编程日记 2025/5/24 15:09:15

煤矿场景下矿工行为检测数据集VOC+YOLO格式24709张8类别

数据集格式：Pascal VOC格式YOLO格式(不包含分割路径的txt文件，仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)：24709 标注数量(xml文件个数)：24709 标注数量(txt文件个数)：2470…...

编程日记 2025/5/23 22:20:24

Git处理冲突详解

文章目录 Git处理冲突详解一、引言二、冲突产生的原因三、解决冲突的步骤1. 手动解决冲突1.1 查看冲突文件1.2 编辑冲突文件1.3 提交解决冲突 2. 使用合并工具解决冲突四、使用示例五、总结 Git处理冲突详解一、引言在团队协作开发中，Git冲突是不可避免的。当多…...

编程日记 2025/5/24 15:45:36

Jetson Orin Nano Super之jetson-fpv开源代码下载

Jetson Orin Nano Super之jetson-fpv开源代码下载 1. 源由2. 方法2.1 优化配置方案一：增加缓冲方案二：降低并发数方案三：临时禁用深度克隆 2.2 路径更换方案一：设置代理方案二：替换git协议方案三：替换https…...

编程日记 2025/5/25 2:36:02

gitlab使用多数据库

1. 说明默认情况下，GitLab 使用一个单一的应用数据库，称为主数据库。为了扩展 GitLab，您可以将 GitLab 配置为使用多个应用数据库。设置多个数据库后，GitLab 将使用第二个应用数据库用于 CI/CD 功能，称为 CI 数据库…...

编程日记 2025/5/24 15:44:53

【Redis】事务

前言： 对比MySQL事务:【MySQL篇】事务的认识以及四大特性-CSDN博客弱化的原子性: redis 没有 "回滚机制". 只能做到这些操作 "批量执行". 不能做到 "一个失败就恢复到初始状态". 不保证一致性: 不涉及 "约束". 也没有…...

编程日记 2025/5/20 8:15:40

在vue3中使用datav完整引入时卡在加载页面的解决方法

文件修改文件：node_modules/dataview\datav-vue3/package.json // "module": "./es/index.js","module": "./es/index.mjs", // 修改后使用完整引入，需要为datav配置文件添加相应方法文件：node…...

编程日记 2025/5/22 2:40:36

WPA_cli P2P命令详解及使用

目录通用命令 status scan scan_results add_network set_network enable_network reconfigure save_config quit P2P 相关命令 p2p_find p2p_peers p2p_connect [method] p2p_group_add [ssid=] [freq=] [ht40] [persistent] p2p_remove_client p2p_di…...

编程日记 2025/5/23 10:46:35

Kubernetes v1.28.0安装dashboard v2.6.1（k8s图形化操作界面）

准备工作 Kubernetes v1.28.0搭建教程请参考：Kubernetes v1.28.0集群快速搭建教程-CSDN博客查看当前集群nodes都是ready状态查看当前pods都是running状态下载并修改配置文件下载 recommended.yaml ，下载好之后，进入文件编辑下载地址…...

编程日记 2025/5/24 15:24:44

性能测试监控与诊断

我们依据一个HTTP请求处理的过程，采用主流的J2EE技术栈，如下图所示 1>用户的请求通过网卡传送到服务器（中断信号），用户与服务器简历TCP/IP链接。也就是产说的TCP三次握手。既然是链接，就有限制&#xff…...

编程日记 2025/5/24 14:54:28

窥探QCC518x-308x系列与手机之间的蓝牙HCI记录与分析 - 耳机篇

上一篇是介绍如何窥探手机端Bluetooth的HCI log, 本次介绍是如何窥探Bluetooth的HCI log-耳机篇. 这次跟QCC518x/QCC308x测试的手机是Samsung S23 Ultra. QCC518x/QCC308x透过HCI界面取得Log教学. 步骤1: 开启QMDE -> 选择ADK r1102 QCC3083 Headset workspace.步骤2: 点…...

编程日记 2025/5/24 10:50:50

Numpy基础02（Numpy对数组的基本操作）

Numpy的基本操作 2.3.1 ndarray索引操作一维数组：同一维列表大致相同 n np.array([1, 2, 3, 4, 5]) n[0], n[-1] #(1, 5)多维数组 n np.random.randint(0, 10, size(3, 4, 5)) print(n) # 访问最后一个元素并改为66 n[2,3,-1] 66 print(n)# 最后一行元素并…...

编程日记 2025/5/24 10:20:43

WPS计算机二级•幻灯片的基础操作

听说这是目录哦 PPT的正确制作步骤🛣️认识PPT界面布局🏜️PPT基础操作快捷键🏞️制作PPT时常用的快捷技巧🏙️快速替换PPT的文本字体🌃快速替换PPT 指定文本内容🌅能量站😚 PPT的正确制作步…...

编程日记 2025/5/20 0:33:22

蓝桥杯准备【入门1】顺序结构

P5705 【深基2.例7】数字反转题目描述输入一个不小于 100100 且小于 10001000，同时包括小数点后一位的一个浮点数，例如 123.4123.4 ，要求把这个数字翻转过来，变成 4.3214.321 并输出。解题思路：使用字符串比较简单…...

编程日记 2025/5/20 14:07:19

Java学习笔记（二十四）

1 策略模式 1.1 策略模式概述策略模式（Strategy Pattern） 是一种行为设计模式，定义了一系列算法，并将它们封装成独立的类，使它们可以互相替换而不会影响使用它们的客户端代码。策略模式的核心思想是将行为与环境解…...

编程日记 2025/5/25 15:41:01

React进阶之高阶组件HOC、react hooks、自定义hooks

React高级高阶组件 HOC属性代理反向继承属性代理和反向继承的区别实例实例一实例二 HooksHooks APIuseState：useEffect：useLayoutEffect：useRef：useContext：useReducer:useMemouseCallback 自定义Hooks 拓展&#xff…...

编程日记 2025/5/24 22:44:01

嵌套路由

配置嵌套路由

动态路由

配置动态路由

总结

相关文章：