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

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之嵌套路由

在路由配置中&#xff0c;配置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. 工厂模式&#xff08;Factory Pattern&#xff09; 2. 单例模式&#xff08;Singleton Pattern&#xff09; 3. 代理模式&#xff08;Proxy Pattern&#xff09; 4. 装饰器模式&#xff08;Decorator Pattern&#xff09; 5. 观察者模式&#xff08;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删除文件内容

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...

C++ 设计模式:桥接模式(Bridge Pattern)

链接&#xff1a;C 设计模式 链接&#xff1a;C 设计模式 - 装饰模式 桥接模式&#xff08;Bridge Pattern&#xff09;是一种结构型设计模式&#xff0c;它通过将抽象部分&#xff08;业务功能&#xff09;与实现部分&#xff08;平台实现&#xff09;分离&#xff0c;使它们…...

MATLAB中whitespacePattern函数用法

目录 语法 说明 示例 匹配空白字符 替换非标准空白 更正错误的间距 whitespacePattern函数的功能是匹配空白字符。 语法 pat whitespacePattern pat whitespacePattern(N) pat whitespacePattern(minCharacters,maxCharacters) 说明 pat whitespacePattern 创建一…...

Django多字段认证的实现

Django多字段认证 需求&#xff1a; django认证的检查用户是username&#xff0c;如果使用 username和 手机号验证登录。 重写&#xff1a; ModelBackend 类下的 authenticate 方法 # 在对应应用下创建 utils.py""" 修改Django认证类&#xff0c;为了实现 …...

【AndroidAPP】权限被拒绝:[android.permission.READ_EXTERNAL_STORAGE],USB设备访问权限系统报错

一、问题原因 1.安卓安全性变更 Android 12 的安全性变更&#xff0c;Google 引入了更严格的 PendingIntent 安全管理&#xff0c;强制要求开发者明确指定 PendingIntent 的可变性&#xff08;Mutable&#xff09;或不可变性&#xff08;Immutable&#xff09;。 但是&#xf…...

SQL进阶技巧:如何分析连续签到领金币数问题?

目录 0 题目需求 1 数据准备 2 问题分析 2.1 代码实现 2.2 代码功能分析 第一段 SQL...

1、ELK的架构和安装

ELK简介 elk&#xff1a;elasticsearch logstash kibana&#xff0c;统一日志收集系统。 elasticsearch&#xff1a;分布式的全文索引引擎的非关系数据库&#xff0c;json格式&#xff0c;在elk中存储所有的日志信息&#xff0c;架构有主和从&#xff0c;最少需要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的版本 如果出现了这个错误&#xff0c;上传的图标都亮起的情况&#xff0c;还是提示这个&#xff0c; 可以试试修改 uedtior.all.js 8082行 isJsonp utils.isCrossDomainUrl(configUrl); 改为 // isJsonp utils.isCrossDomainUrl(configUrl); isJsonp true; 如果还不…...

【机器学习 | 数据挖掘】时间序列算法

时间序列是按时间顺序排列的、随时间变化且相互关联的数据序列。分析时间序列的方法构成数据分析的一个重要领域&#xff0c;即时间序列分析。以下是对时间序列算法的详细介绍&#xff1a; 一、时间序列的分类 时间序列根据所研究的依据不同&#xff0c;可有不同的分类&#…...

uniapp H5 对接 声网,截图

文章目录 安装依赖创建容器容器样式 javascript代码ImageDataToBlob 方法 控制控制台LOG输出 安装依赖 版本"agora-rtc-sdk-ng": "^4.22.0", 创建容器 <template><view class"videoValue " id"videoValue"><u-toast…...

家谱管理系统|Java|SSM|VUE| 前后端分离

【技术栈】 1⃣️&#xff1a;架构: B/S、MVC 2⃣️&#xff1a;系统环境&#xff1a;Windowsh/Mac 3⃣️&#xff1a;开发环境&#xff1a;IDEA、JDK1.8、Maven、Mysql5.7 4⃣️&#xff1a;技术栈&#xff1a;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.

文章目录 一、问题描述二、先解决三、后原因&#xff08;了解&#xff09; 一、问题描述 就是在使用 IDEA 写代码时&#xff0c;IDEA 可能会弹一个窗&#xff0c;大概提示你目前使用的 IDEA 内存不足&#xff0c;其实就是提醒你 JVM 的内存不够了&#xff0c;需要重新分配。弹…...

python ai ReAct 代理(ReAct Agent)

ReAct 代理&#xff08;ReAct Agent&#xff09;是一种结合了推理&#xff08;Reasoning&#xff09;和行动&#xff08;Action&#xff09;的智能代理框架&#xff0c;旨在通过交互式的方式解决复杂任务。ReAct 的核心思想是让代理在完成任务时&#xff0c;能够动态地推理下一…...

美的集团2025年营收创新高、利润100%分红 落地1.3万个AI智能体

3月30日&#xff0c;美的集团发布2025年年报&#xff0c;实现营业总收入4585亿元&#xff0c;同比增长12.1%&#xff1b;归属于上市公司股东的净利润439.5亿元&#xff0c;同比上升14%。在业绩再创新高的同时&#xff0c;伴随我国“人工智能”行动的全面实施&#xff0c;美的集…...

Ostrakon-VL零售AI降本方案:替代人工巡检,单店年省8万元

Ostrakon-VL零售AI降本方案&#xff1a;替代人工巡检&#xff0c;单店年省8万元 1. 零售巡检的痛点与AI解决方案 在传统零售运营中&#xff0c;门店巡检是一项耗时耗力的日常工作。店长或督导人员需要每天检查&#xff1a; 商品陈列是否整齐货架缺货情况价签是否正确店铺环境…...

【计算机视觉实战】第10章 | 单阶段目标检测YOLO与SSD:实时检测的极致追求

欢迎来到《计算机视觉实战》系列教程的第十章。在第九章我们学习了Faster R-CNN等两阶段检测器&#xff0c;它们精度高但速度慢。本章我们将学习单阶段检测器&#xff08;One-stage Detector&#xff09;&#xff0c;特别是YOLO和SSD&#xff0c;它们在保持可观精度的同时实现了…...

别再死记硬背了!用C++/Java手把手实现线索二叉树(附完整代码与避坑指南)

从零实现线索二叉树&#xff1a;C/Java双语言实战与陷阱全解析 第一次在面试白板上遇到线索二叉树的实现题时&#xff0c;我的手心全是汗。教科书上的递归图示看起来清晰&#xff0c;但真正要写出无bug的线索化代码时&#xff0c;那些ltag和rtag就像捉迷藏的孩子&#xff0c;总…...

智慧卤味,一码追溯:万界星空MES方案

一、行业痛点与MES目标1、主要痛点生产依赖经验&#xff1a;卤制时间、温度、配料比例依赖人工经验&#xff0c;产品口味和质量不稳定。追溯困难&#xff1a;一旦出现食品安全问题&#xff0c;难以快速精准追溯到问题源头&#xff08;原料批次、生产环节、操作人员等&#xff0…...

基于比迪丽模型的Transformer架构优化:提升图像生成质量

基于比迪丽模型的Transformer架构优化&#xff1a;提升图像生成质量 在图像生成领域&#xff0c;比迪丽模型凭借其出色的生成效果和稳定性赢得了广泛关注。但很多用户可能不知道&#xff0c;通过合理的Transformer架构优化&#xff0c;这个模型的图像生成质量还能再上一个台阶…...

APDS9960手势传感器驱动开发与嵌入式实战

1. APDS9960手势传感器库技术解析与嵌入式工程实践APDS9960是一款由Broadcom&#xff08;原Avago&#xff09;推出的集成环境光、颜色、接近度及手势识别功能的多模态光学传感器芯片。其核心价值在于将传统分立式光感方案&#xff08;如独立ALSProximityGesture模块&#xff09…...

药物研发新思路:共价对接工具AutoDock4实战指南(附避坑技巧)

药物研发新思路&#xff1a;共价对接工具AutoDock4实战指南&#xff08;附避坑技巧&#xff09; 在当今药物研发领域&#xff0c;共价抑制剂因其独特的作用机制和显著的治疗优势正受到前所未有的关注。与传统非共价药物相比&#xff0c;这类分子能与靶蛋白形成稳定的共价键&…...

uboot移植实战:DDR初始化参数优化与调试指南

1. 理解DDR初始化在uboot移植中的重要性 第一次接触uboot移植时&#xff0c;我完全不明白为什么DDR初始化这么麻烦。直到有一次&#xff0c;我把开发板直接烧成砖头&#xff0c;才真正意识到这个环节有多关键。简单来说&#xff0c;DDR初始化就像是给电脑装内存条&#xff0c;但…...

KOReader 2025.04:重新定义电子墨水屏阅读

KOReader 2025.04&#xff1a;重新定义电子墨水屏阅读 【免费下载链接】koreader An ebook reader application supporting PDF, DjVu, EPUB, FB2 and many more formats, running on Cervantes, Kindle, Kobo, PocketBook and Android devices 项目地址: https://gitcode.co…...