Vue-Router之嵌套路由
在路由配置中,配置children
import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)const router = new VueRouter({mode: 'history',base: import.meta.env.BASE_URL,routes: [{path: '/',redirect: '/home'},{path: '/home',name: 'home',component: () => import('../views/HomeView.vue'),children: [{path: 'news',name: 'news',component: () => import('../views/NewsView.vue'),},{path: 'message',name: 'message',component: () => import('../views/MessageView.vue'),},]},{path: '/about',name: 'about',component: () => import('../views/AboutView.vue')},]
})export default router
在子页面中,继续使用router-link与router-view
<script>
export default {name: "HomeView"
}
</script><template><div class="home-container"><h3>Home组件</h3><router-link to="/home/news">News</router-link><br><router-link to="/home/message">Message</router-link><router-view></router-view></div></template><style scoped>
.home-container {min-height: 150px;background-color: #f2f2f2;padding: 15px;
}</style>
相关文章:
Vue-Router之嵌套路由
在路由配置中,配置children import Vue from vue import VueRouter from vue-routerVue.use(VueRouter)const router new VueRouter({mode: history,base: import.meta.env.BASE_URL,routes: [{path: /,redirect: /home},{path: /home,name: home,component: () &…...
MyBatis使用的设计模式
目录 1. 工厂模式(Factory Pattern) 2. 单例模式(Singleton Pattern) 3. 代理模式(Proxy Pattern) 4. 装饰器模式(Decorator Pattern) 5. 观察者模式(Observer Patt…...
arm rk3588 升级glibc2.31到2.33
一、查看glibc版本 rootztl:~# ldd --version ldd (Ubuntu GLIBC 2.31-0ubuntu9.2) 2.31 Copyright (C) 2020 Free Software Foundation, Inc. This is free software; see the source for copying conditions. There is NO warranty; not even for MERCHANTABILITY or FITNE…...
【Linux系列】sed命令的深入解析:如何使用sed删除文件内容
💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...
C++ 设计模式:桥接模式(Bridge Pattern)
链接:C 设计模式 链接:C 设计模式 - 装饰模式 桥接模式(Bridge Pattern)是一种结构型设计模式,它通过将抽象部分(业务功能)与实现部分(平台实现)分离,使它们…...
MATLAB中whitespacePattern函数用法
目录 语法 说明 示例 匹配空白字符 替换非标准空白 更正错误的间距 whitespacePattern函数的功能是匹配空白字符。 语法 pat whitespacePattern pat whitespacePattern(N) pat whitespacePattern(minCharacters,maxCharacters) 说明 pat whitespacePattern 创建一…...
Django多字段认证的实现
Django多字段认证 需求: django认证的检查用户是username,如果使用 username和 手机号验证登录。 重写: ModelBackend 类下的 authenticate 方法 # 在对应应用下创建 utils.py""" 修改Django认证类,为了实现 …...
【AndroidAPP】权限被拒绝:[android.permission.READ_EXTERNAL_STORAGE],USB设备访问权限系统报错
一、问题原因 1.安卓安全性变更 Android 12 的安全性变更,Google 引入了更严格的 PendingIntent 安全管理,强制要求开发者明确指定 PendingIntent 的可变性(Mutable)或不可变性(Immutable)。 但是…...
SQL进阶技巧:如何分析连续签到领金币数问题?
目录 0 题目需求 1 数据准备 2 问题分析 2.1 代码实现 2.2 代码功能分析 第一段 SQL...
1、ELK的架构和安装
ELK简介 elk:elasticsearch logstash kibana,统一日志收集系统。 elasticsearch:分布式的全文索引引擎的非关系数据库,json格式,在elk中存储所有的日志信息,架构有主和从,最少需要2台。 …...
Vue2/Vue3使用DataV
Vue2 注意vue2与3安装DataV命令命令是不同的Vue3 DataV - Vue3 官网地址 注意vue2与3安装DataV命令命令是不同的 vue3vite 与 Vue3webpack 对应安装也不同vue3vite npm install kjgl77/datav-vue3全局引入 // main.ts中全局引入 import { createApp } from vue import Da…...
汇编环境搭建
学习视频 将MASM所在目录 指定为C盘...
Android 系统 `android.app.Fragment` 类的深度定制与常见问题解析
Android 系统 android.app.Fragment 类的深度定制与常见问题解析 目录 引言Fragment 概述Fragment 的生命周期Fragment 的系统层深度定制 4.1 Fragment 的创建与初始化4.2 Fragment 的布局与视图4.3 Fragment 的通信机制4.4 Fragment 的动画与过渡4.5 Fragment 的状态保存与恢…...
linux ueditor nginx https 后台配置项返回格式出错,上传功能将不能正常使用
jsp的版本 如果出现了这个错误,上传的图标都亮起的情况,还是提示这个, 可以试试修改 uedtior.all.js 8082行 isJsonp utils.isCrossDomainUrl(configUrl); 改为 // isJsonp utils.isCrossDomainUrl(configUrl); isJsonp true; 如果还不…...
【机器学习 | 数据挖掘】时间序列算法
时间序列是按时间顺序排列的、随时间变化且相互关联的数据序列。分析时间序列的方法构成数据分析的一个重要领域,即时间序列分析。以下是对时间序列算法的详细介绍: 一、时间序列的分类 时间序列根据所研究的依据不同,可有不同的分类&#…...
uniapp H5 对接 声网,截图
文章目录 安装依赖创建容器容器样式 javascript代码ImageDataToBlob 方法 控制控制台LOG输出 安装依赖 版本"agora-rtc-sdk-ng": "^4.22.0", 创建容器 <template><view class"videoValue " id"videoValue"><u-toast…...
家谱管理系统|Java|SSM|VUE| 前后端分离
【技术栈】 1⃣️:架构: B/S、MVC 2⃣️:系统环境:Windowsh/Mac 3⃣️:开发环境:IDEA、JDK1.8、Maven、Mysql5.7 4⃣️:技术栈:Java、Mysql、SSM、Mybatis-Plus、VUE、jquery,html 5⃣️数据库…...
【LeetCode】200、岛屿数量
【LeetCode】200、岛屿数量 文章目录 一、并查集1.1 并查集1.2 多语言解法 二、洪水填充 DFS2.1 洪水填充 DFS 一、并查集 1.1 并查集 // go var sets int var father [90000]intfunc numIslands(grid [][]byte) int {n, m : len(grid), len(grid[0])build(grid, n, m)for i …...
idea报错:There is not enough memory to perform the requested operation.
文章目录 一、问题描述二、先解决三、后原因(了解) 一、问题描述 就是在使用 IDEA 写代码时,IDEA 可能会弹一个窗,大概提示你目前使用的 IDEA 内存不足,其实就是提醒你 JVM 的内存不够了,需要重新分配。弹…...
python ai ReAct 代理(ReAct Agent)
ReAct 代理(ReAct Agent)是一种结合了推理(Reasoning)和行动(Action)的智能代理框架,旨在通过交互式的方式解决复杂任务。ReAct 的核心思想是让代理在完成任务时,能够动态地推理下一…...
TP4056充电板实战避坑指南:从LED状态误判到TEMP脚悬空,新手最容易踩的5个坑
TP4056充电板实战避坑指南:从LED状态误判到TEMP脚悬空,新手最容易踩的5个坑 第一次使用TP4056充电板时,我盯着闪烁的LED灯陷入了困惑——为什么充满电后红灯还亮着?为什么电池发热异常?这些问题让我意识到,…...
PyTorch 2.8镜像实战落地:教育机构AI教学平台(图文+视频+LLM)集成方案
PyTorch 2.8镜像实战落地:教育机构AI教学平台(图文视频LLM)集成方案 1. 教育AI平台的技术挑战与解决方案 现代教育机构在构建AI教学平台时面临三大技术难题:多模态内容生成、算力资源管理和教学场景适配。PyTorch 2.8深度学习镜…...
Qwen3.5-9B企业落地:制造业BOM表识别+物料替代方案生成实战
Qwen3.5-9B企业落地:制造业BOM表识别物料替代方案生成实战 1. 项目背景与价值 在制造业生产过程中,物料清单(BOM)管理和物料替代是常见的痛点问题。传统方式需要人工核对大量表格数据,效率低下且容易出错。Qwen3.5-9B作为90亿参数的开源大语…...
VS Code 效率技巧:符号导航快速定位代码
推荐阅读 技术总监悄悄秀了一把 VS Code 神技,被我狠狠学到了! VS Code 又发布了一个 Agent 新玩具! VS Code 1.110 官宣 AI 新特性:AI 直接调试浏览器! VS Code 2026 效率秘籍:学完无敌!…...
Redis 单线程真的是单线程吗?源码角度全面解析
Redis 是单线程的——这句话流传太广了,以至于很多人真的以为 Redis 就一个线程在跑。但实际上,如果你 ps -ef 或者 top 看一眼正在运行的 Redis 进程,会发现线程数不止一个。 到底怎么回事?这篇文章从源码角度把这个问题彻底说清…...
ROS实战:UZH-FPV数据集下PL-EVIO与主流VIO算法的性能对比
1. UZH-FPV数据集与无人机视觉里程计的挑战 UZH-FPV数据集是苏黎世联邦理工学院发布的专门针对高速无人机场景的多模态数据集。这个数据集最大的特点在于它完整记录了无人机在高速机动飞行(最高速度超过10m/s)时的多传感器数据,包括双目事件相…...
YOLO12模型与GitHub Actions结合:自动化测试与部署流水线
YOLO12模型与GitHub Actions结合:自动化测试与部署流水线 1. 引言 在目标检测项目的开发过程中,我们经常面临这样的挑战:每次修改代码后都需要手动运行测试、构建镜像、部署模型,这个过程既耗时又容易出错。特别是对于YOLO12这样…...
2026年,亳州钢筋网片厂家有何亮点?
在建筑行业蓬勃发展的当下,钢筋网片作为建筑施工中不可或缺的材料,其质量和供应能力直接影响着工程的质量和进度。2026年,亳州的钢筋网片市场竞争激烈,其中安平县齐宇丝网制品有限公司(以下简称“齐宇公司”࿰…...
【Typst源文件】Typst 纸张定义完全指南
Typst 通过 page 函数来定义纸张的尺寸、边距、方向等属性。通常使用 #set page() 规则在文档开头进行全局设置。 1. 基础纸张设置 1.1 使用标准纸张尺寸 Typst 支持丰富的标准纸张尺寸,只需传入纸张名称字符串即可: // 设置为 A4 纸张(默…...
【原创】金三银四末班车!4个高薪安全岗,2W月短期项目、百万年薪云架构师,速来!
【原创】金三银四末班车!4个高薪安全岗,2W/月短期项目、百万年薪云架构师,速来! 金三银四虽然接近尾声,但好岗位从不等人!这次我们挖到了4个含金量超高的信息安全岗位,覆盖北京、深圳、上海、厦…...
