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

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、嵌套路由的含义 嵌套路由的核心思想是&#xff1a;在某个路由的组件内部&#xff0c;可以定义子路由&#xff0c;这些子路由会渲染在父路由组件的特定位置&#xff08;通常是 <router-view> 标签所在的位置&#xff09;。通过嵌套路由&#xff0c;你可以实…...

AIGC和搜索引擎的异同

AIGC&#xff08;生成式人工智能&#xff09;与搜索引擎的核心差异体现在信息处理方式和输出形态上&#xff0c;我们可以从以下维度对比&#xff1a; 一、工作原理的本质差异 信息检索机制 搜索引擎&#xff1a;基于关键词匹配&#xff08;如"中暑怎么办"→返回相关…...

ES批量查询

在 Elasticsearch 中&#xff0c;multi_search&#xff08;也称为 msearch&#xff09;是一种允许你在单个请求中执行多个搜索操作的 API。它可以显著减少网络开销&#xff0c;尤其是在需要执行多个查询时。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中&#xff0c;contextMenuEvent() 是 QWidget 类&#xff08;以及继承自它的所有子类&#xff09;的一个事件处理方法&#xff0c;主要用于处理上下文菜单事件&#xff0c;也就是当用户在控件上右键点击时触发的事件。 • 通过重新定义contextMenuEvent()来实现自定…...

Storm实时流式计算系统(全解)——下

storm编程案例-网站访问来源实时统计-需求 storm编程-网站访问来源实时统计-代码实现 根据以上条件可以只写一个类&#xff0c;我们只需要写2个方法和一个main&#xff08;&#xff09;&#xff0c;一个读取/发射&#xff08;spout&#xff09;。 一个拿到数据统计后发到redis…...

配置Nginx日志url encode问题

文章目录 配置Nginx日志url encode问题方法1-lua方法2-set-misc-nginx-module 配置Nginx日志url encode问题 问题描述&#xff1a; 当自定义日志输出格式&#xff0c;需要输出http请求中url参数时&#xff0c;如果参数中包含中文&#xff0c;是会进行url encode的&#xff0c…...

JAVA SE 包装类和泛型

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

基于Linux系统的物联网智能终端

背景 产品研发和项目研发有什么区别&#xff1f;一个令人发指的问题&#xff0c;刚开始工作时项目开发居多&#xff0c;认为项目开发和产品开发区别不大&#xff0c;待后来随着自身能力的提升&#xff0c;逐步感到要开发一个好产品还是比较难的&#xff0c;我认为项目开发的目的…...

从零开始开发纯血鸿蒙应用之语音朗读

从零开始开发纯血鸿蒙应用 〇、前言一、API 选型1、基本情况2、认识TextToSpeechEngine 二、功能集成实践1、改造右上角菜单2、实现语音播报功能2.1、语音引擎的获取和关闭2.2、设置待播报文本2.3、speak 目标文本2.4、设置语音回调 三、总结 〇、前言 中华汉字洋洋洒洒何其多…...

物联网小范围高精度GPS使用

在园区内实现小范围高精度GPS&#xff08;全球定位系统&#xff09;定位&#xff0c;通常需要结合多种技术来弥补传统GPS在精度和覆盖范围上的不足。以下是实现小范围高精度GPS定位的解决方案&#xff0c;包括技术选择、系统设计和应用场景。 一、技术选择 在园区内实现高精度…...

一次有趣的前后端跨越排查

进行前后端代码联调的时候&#xff0c;使用axios调用后端请求&#xff0c;因为都是本地进行联调&#xff0c;所以没有考虑跨域的问题&#xff0c;写了一个get的请求接口&#xff0c;请求后端时&#xff0c;突然跳出下面的问题&#xff1a; 错误的信息一看很像就是跨域的问题&…...

大语言模型(LLM)如何赋能时间序列分析?

引言 近年来&#xff0c;大语言模型&#xff08;LLM&#xff09;在文本生成、推理和跨模态任务中展现了惊人能力。与此同时&#xff0c;时间序列分析作为工业、金融、物联网等领域的核心技术&#xff0c;长期依赖传统统计模型&#xff08;如ARIMA&#xff09;或深度学习模型&a…...

Kubernetes (K8S) 核心原理深度剖析:从架构设计到运行机制

Kubernetes(K8S)作为容器编排领域的“操作系统”,其设计和实现原理是开发者进阶的必修课。本文将从架构设计、核心组件协作、关键机制实现三个维度,结合源码逻辑与实战场景,分享 K8S 的底层运行原理。 一、Kubernetes 架构设计 1. 声明式 API 与控制器模式 K8S 的核心设…...

Excel 豆知识 - XLOOKUP 为啥会出 #N/A 错误

XLOOKUP有的时候会出 #VALUE! 这个错误。 因为这个XLOOUP有个参数叫 找不到时的返回值&#xff0c;那么为啥还会返回 #VALUE! 呢&#xff1f; 可能还有别的原因&#xff0c;但是主要原因应该就是 检索范围 和 返回范围 不同。 比如这里检索范围在 B列&#xff0c;是 4-21&…...

【深度学习】Hopfield网络:模拟联想记忆

Hopfield网络是一种经典的循环神经网络&#xff0c;由物理学家John Hopfield在1982年提出。它的核心功能是模拟联想记忆&#xff0c;类似于人类大脑通过部分信息回忆完整记忆的能力。以下是通俗易懂的解释&#xff1a; 1. 核心思想 想象你看到一张模糊的老照片&#xff0c;虽然…...

Python可视化大框架的研究与应用

## 摘要 随着数据科学和人工智能的快速发展&#xff0c;数据可视化成为了数据分析中不可或缺的一部分。Python作为一种功能强大且易于学习的编程语言&#xff0c;提供了多种可视化工具和库。本文旨在探讨Python可视化的主要框架&#xff0c;分析其特点、应用场景以及未来发展趋…...

Java 泛型(Generics)详解与使用

一、什么是 Java 泛型&#xff1f; 泛型&#xff08;Generics&#xff09;是 Java 1.5 引入的一项重要特性&#xff0c;主要用于 类型参数化&#xff0c;允许在类、接口和方法定义时使用 类型参数&#xff08;Type Parameter&#xff09;&#xff0c;从而提高代码的复用性、类…...

七、Three.jsPBR材质与纹理贴图

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

2024 ChatGPT大模型技术场景与商业应用视频精讲合集(45课).zip

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

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

Windows安装Miniconda

一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...

【前端异常】JavaScript错误处理:分析 Uncaught (in promise) error

在前端开发中&#xff0c;JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作&#xff08;如 Promise、async/await 等&#xff09;&#xff0c;开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝&#xff08;r…...

Vue 模板语句的数据来源

&#x1f9e9; Vue 模板语句的数据来源&#xff1a;全方位解析 Vue 模板&#xff08;<template> 部分&#xff09;中的表达式、指令绑定&#xff08;如 v-bind, v-on&#xff09;和插值&#xff08;{{ }}&#xff09;都在一个特定的作用域内求值。这个作用域由当前 组件…...

ZYNQ学习记录FPGA(一)ZYNQ简介

一、知识准备 1.一些术语,缩写和概念&#xff1a; 1&#xff09;ZYNQ全称&#xff1a;ZYNQ7000 All Pgrammable SoC 2&#xff09;SoC:system on chips(片上系统)&#xff0c;对比集成电路的SoB&#xff08;system on board&#xff09; 3&#xff09;ARM&#xff1a;处理器…...