vue3:四嵌套路由的实现
一、前言
1、嵌套路由的含义
嵌套路由的核心思想是:在某个路由的组件内部,可以定义子路由,这些子路由会渲染在父路由组件的特定位置(通常是 <router-view>
标签所在的位置)。通过嵌套路由,你可以实现多层级的页面布局。
2、使用场景
嵌套路由通常用于以下场景:
- 多层布局:比如一个页面有顶部导航栏、侧边栏和内容区域,内容区域可以根据路由动态变化。
- 模块化开发:将页面拆分为多个子模块,每个子模块对应一个子路由。
- 动态路由:根据用户权限或其他条件动态加载子路由。
3、实现方式
在 Vue Router 中,通过 children
属性来定义嵌套路由。children
是一个数组,每个元素都是一个子路由配置对象。
4、实现参考
可参考官网
嵌套路由 | Vue Routerhttps://router.vuejs.org/zh/guide/essentials/nested-routes.html
5、示例展示
// 路由配置
const routes = [{path: '/parent', // 父路由路径component: ParentComponent, // 父路由组件children: [{path: 'child1', // 子路由路径(相对于父路由)component: Child1Component // 子路由组件},{path: 'child2',component: Child2Component}]}
];// 创建路由实例
const router = new VueRouter({routes
});
在父组件 ParentComponent
中,需要使用 <router-view>
来渲染子路由组件:
<!-- ParentComponent.vue -->
<template><div><h1>父组件</h1><router-view></router-view> <!-- 子路由组件会渲染在这里 --></div>
</template>
访问嵌套路由
访问嵌套路由时,路径是父路由路径和子路由路径的组合。例如:
/parent/child1
会渲染Child1Component
。/parent/child2
会渲染Child2Component
。
二、实现步骤
1、找到初始写入路由页面
2、新建一个专门带左侧导航条的Layout
①路径
src->layout->index.vue
②代码
index.vue
<template><div>左侧导航条</div><div>右侧内容<!-- 右侧内容,引入的页面 --><router-view></router-view><!-- 或者使用 --><!-- <RouterView /> --></div>
</template>
③改写路由代码
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/',name: 'main',component: () => import('../layout/index.vue'),children: [{path: '/home',name: 'home',component: HomeView,},{path: '/about',name: 'about',component: () => import('../views/AboutView.vue'),},],}, {path: '/:pathMatch(.*)*',name: 'NotFound',component: () => import('../views/NotFoundView.vue'),},],
})export default router
父级路由
为刚才新建立的layout的index.vue页面
path: '/',
name: 'main',
component: () => import('../layout/index.vue'),
path:父路由路径,这里的值为/,可以结合多个页面对比一下
这是path: '/'
下面是path: '/home'
name:为此路由命名,可以省略
component:表示父路由组件,这里也就是引入父路由的页面
子路由
这里存入两个页面一个是之前的home页面,一个是about页面
这里的home的component的值为HomeView,其实是因为顶部已经有引入了,其实写法一样,只是换成了变量的形式
3、实现效果
现在可以看出父路由下的页面其实就是layout/index.vue的页面效果
子路由的页面效果就是在右侧内容中加入了页面引入
相关文章:

vue3:四嵌套路由的实现
一、前言 1、嵌套路由的含义 嵌套路由的核心思想是:在某个路由的组件内部,可以定义子路由,这些子路由会渲染在父路由组件的特定位置(通常是 <router-view> 标签所在的位置)。通过嵌套路由,你可以实…...
AIGC和搜索引擎的异同
AIGC(生成式人工智能)与搜索引擎的核心差异体现在信息处理方式和输出形态上,我们可以从以下维度对比: 一、工作原理的本质差异 信息检索机制 搜索引擎:基于关键词匹配(如"中暑怎么办"→返回相关…...
ES批量查询
在 Elasticsearch 中,multi_search(也称为 msearch)是一种允许你在单个请求中执行多个搜索操作的 API。它可以显著减少网络开销,尤其是在需要执行多个查询时。multi_search 会将多个查询打包成一个请求发送给 Elasticsearch&#…...

Vue2学习
一、Vue3 基础 监视属性 天气案例 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>天气案例</…...

PySide(PyQT)重新定义contextMenuEvent()实现鼠标右键弹出菜单
在 PySide中,contextMenuEvent() 是 QWidget 类(以及继承自它的所有子类)的一个事件处理方法,主要用于处理上下文菜单事件,也就是当用户在控件上右键点击时触发的事件。 • 通过重新定义contextMenuEvent()来实现自定…...

Storm实时流式计算系统(全解)——下
storm编程案例-网站访问来源实时统计-需求 storm编程-网站访问来源实时统计-代码实现 根据以上条件可以只写一个类,我们只需要写2个方法和一个main(),一个读取/发射(spout)。 一个拿到数据统计后发到redis…...
配置Nginx日志url encode问题
文章目录 配置Nginx日志url encode问题方法1-lua方法2-set-misc-nginx-module 配置Nginx日志url encode问题 问题描述: 当自定义日志输出格式,需要输出http请求中url参数时,如果参数中包含中文,是会进行url encode的,…...

JAVA SE 包装类和泛型
文章目录 📕1. 包装类✏️1.1 基本数据类型和对应的包装类✏️1.2 装箱和拆箱✏️1.3 自动装箱和自动拆箱 📕2. 泛型✏️2.1 泛型的语法✏️2.2 泛型类的使用✏️2.3 裸类型(Raw Type)✏️2.4 擦除机制✏️2.5 泛型的上界✏️2.6 泛型方法✏️2.7 通配符…...

基于Linux系统的物联网智能终端
背景 产品研发和项目研发有什么区别?一个令人发指的问题,刚开始工作时项目开发居多,认为项目开发和产品开发区别不大,待后来随着自身能力的提升,逐步感到要开发一个好产品还是比较难的,我认为项目开发的目的…...

从零开始开发纯血鸿蒙应用之语音朗读
从零开始开发纯血鸿蒙应用 〇、前言一、API 选型1、基本情况2、认识TextToSpeechEngine 二、功能集成实践1、改造右上角菜单2、实现语音播报功能2.1、语音引擎的获取和关闭2.2、设置待播报文本2.3、speak 目标文本2.4、设置语音回调 三、总结 〇、前言 中华汉字洋洋洒洒何其多…...
物联网小范围高精度GPS使用
在园区内实现小范围高精度GPS(全球定位系统)定位,通常需要结合多种技术来弥补传统GPS在精度和覆盖范围上的不足。以下是实现小范围高精度GPS定位的解决方案,包括技术选择、系统设计和应用场景。 一、技术选择 在园区内实现高精度…...

一次有趣的前后端跨越排查
进行前后端代码联调的时候,使用axios调用后端请求,因为都是本地进行联调,所以没有考虑跨域的问题,写了一个get的请求接口,请求后端时,突然跳出下面的问题: 错误的信息一看很像就是跨域的问题&…...
大语言模型(LLM)如何赋能时间序列分析?
引言 近年来,大语言模型(LLM)在文本生成、推理和跨模态任务中展现了惊人能力。与此同时,时间序列分析作为工业、金融、物联网等领域的核心技术,长期依赖传统统计模型(如ARIMA)或深度学习模型&a…...
Kubernetes (K8S) 核心原理深度剖析:从架构设计到运行机制
Kubernetes(K8S)作为容器编排领域的“操作系统”,其设计和实现原理是开发者进阶的必修课。本文将从架构设计、核心组件协作、关键机制实现三个维度,结合源码逻辑与实战场景,分享 K8S 的底层运行原理。 一、Kubernetes 架构设计 1. 声明式 API 与控制器模式 K8S 的核心设…...

Excel 豆知识 - XLOOKUP 为啥会出 #N/A 错误
XLOOKUP有的时候会出 #VALUE! 这个错误。 因为这个XLOOUP有个参数叫 找不到时的返回值,那么为啥还会返回 #VALUE! 呢? 可能还有别的原因,但是主要原因应该就是 检索范围 和 返回范围 不同。 比如这里检索范围在 B列,是 4-21&…...
【深度学习】Hopfield网络:模拟联想记忆
Hopfield网络是一种经典的循环神经网络,由物理学家John Hopfield在1982年提出。它的核心功能是模拟联想记忆,类似于人类大脑通过部分信息回忆完整记忆的能力。以下是通俗易懂的解释: 1. 核心思想 想象你看到一张模糊的老照片,虽然…...
Python可视化大框架的研究与应用
## 摘要 随着数据科学和人工智能的快速发展,数据可视化成为了数据分析中不可或缺的一部分。Python作为一种功能强大且易于学习的编程语言,提供了多种可视化工具和库。本文旨在探讨Python可视化的主要框架,分析其特点、应用场景以及未来发展趋…...
Java 泛型(Generics)详解与使用
一、什么是 Java 泛型? 泛型(Generics)是 Java 1.5 引入的一项重要特性,主要用于 类型参数化,允许在类、接口和方法定义时使用 类型参数(Type Parameter),从而提高代码的复用性、类…...

七、Three.jsPBR材质与纹理贴图
1、PBR材质金属度和粗糙度 1、金属度metalness 金属度属性.metalness表示材质像金属的程度, 非金属材料,如木材或石材,使用0.0,金属使用1.0。 threejs的PBR材质,.metalness默认是0.5,0.0到1.0之间的值可用于生锈的金属外观 new THREE.MeshStandardMaterial({met…...

2024 ChatGPT大模型技术场景与商业应用视频精讲合集(45课).zip
2024ChatGPT大模型技术场景与商业应用视频精讲合集,共十三章,45课。 01. 第一章 ChatGPT:通用人工智能的典范 1.1 ChatGPT概述 .mp4 1.2 通用能力 .mp4 1.3 通用人工智能风口 .mp4 02. 第二章 大模型:ChatGPT的核心支撑 2.1 底层…...

IDEA运行Tomcat出现乱码问题解决汇总
最近正值期末周,有很多同学在写期末Java web作业时,运行tomcat出现乱码问题,经过多次解决与研究,我做了如下整理: 原因: IDEA本身编码与tomcat的编码与Windows编码不同导致,Windows 系统控制台…...
Android Wi-Fi 连接失败日志分析
1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分: 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析: CTR…...

零基础设计模式——行为型模式 - 责任链模式
第四部分:行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习!行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想:使多个对象都有机会处…...
精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南
精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南 在数字化营销时代,邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天,我们将深入解析邮件打开率、网站可用性、页面参与时…...

网站指纹识别
网站指纹识别 网站的最基本组成:服务器(操作系统)、中间件(web容器)、脚本语言、数据厍 为什么要了解这些?举个例子:发现了一个文件读取漏洞,我们需要读/etc/passwd,如…...
代码随想录刷题day30
1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币,另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额,返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

Windows安装Miniconda
一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...
【前端异常】JavaScript错误处理:分析 Uncaught (in promise) error
在前端开发中,JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作(如 Promise、async/await 等),开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝(r…...
Vue 模板语句的数据来源
🧩 Vue 模板语句的数据来源:全方位解析 Vue 模板(<template> 部分)中的表达式、指令绑定(如 v-bind, v-on)和插值({{ }})都在一个特定的作用域内求值。这个作用域由当前 组件…...

ZYNQ学习记录FPGA(一)ZYNQ简介
一、知识准备 1.一些术语,缩写和概念: 1)ZYNQ全称:ZYNQ7000 All Pgrammable SoC 2)SoC:system on chips(片上系统),对比集成电路的SoB(system on board) 3)ARM:处理器…...