vue-router4 (六) 路由嵌套

应用场景:

①比如京东页面的首页、购物车、我的按钮,可以点击切换到对应的页面;

② 比如 Ant Design左侧这些按钮点击就会切到对应的页面,此时可以把左侧按钮放在父路由中,右侧的子路由

1.路由配置,子路由存放在children中,children中还能再嵌套children
const routes:Array<RouteRecordRaw> = [{path:"/user",   //路径name:"Footer",    //路由名称component:()=>import("../components/footer.vue"), //组件名,此处懒加载方式//子路由存放在children中children:[{path:"/user",   //子路由路径name:"Login",    //子路由名称component:()=>import("../components/login.vue")},{path:"/user/reg",  name:"Reg",component:()=>import("../components/reg.vue")}]}
]

2.父级路由组件中使用 <router-view ></router-view>(根据url不同,展示不同内容给用户)
<template><router-view ></router-view><br>我是父路由<div><router-link to="/user" style="margin-right: 20px;">login</router-link><router-link to="/user/reg">reg</router-link></div>
</template>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/706619.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

将法律条文很美观的复制到word上

前言 目前很多法律条款都没有现成的PDF或者word格式的供大家下载&#xff0c;这个时候呢&#xff0c;领导又要求你帮他搞定&#xff0c;这就很。。。。 步骤 复制全部条款到word中使用wps的排版功能&#xff0c;将空格和空段落全部移除 3. 设置好你需要的格式 标题&#xff…

常用对象的遍历方法

var obj [{name: 1111,account: {01: { name: 1.1 },02: { name: 1.2 },03: { name: 1.3 },04: { name: 1.4 },05: { name: 1.5 },}} ]var nowObj obj[0].account;1、for…in 任意顺序遍历对象所有的可枚举属性&#xff08;包括对象自身的和继承的可枚举属性&#xff0c;不含…

影像仪激光扫描功能,无缝连接2D/3D混合测量

在现代工业生产领域&#xff0c;影像仪用于质量控制和产品检测&#xff0c;是一个不可或缺的工具。它通过高精度的成像和图像处理技术&#xff0c;可以及时发现产品的缺陷和异常&#xff0c;以保证产品质量的稳定性和一致性。 影像仪的重要性及其面临的挑战 在工业生产方面&a…

代码随想录算法训练营第42天|● 1049. 最后一块石头的重量 II ● 494. 目标和 ● 474.一和零

文章目录 1049.最后一块石头的重量II思路&#xff1a;动归五部曲代码&#xff1a; ● 494. 目标和思路五部曲1.确定dp数组五部曲2.确定dp公式3.dp初始化4.遍历顺序 代码&#xff1a; ● 474.一和零思路动归五部曲 代码&#xff1a; 1049.最后一块石头的重量II 思路&#xff1a;…

go test用法(获取单元测试覆盖率)

go test用法&#xff08;获取ut覆盖率&#xff09; 为了提升系统的稳定性&#xff0c;一般公司都会对代码的单元测试覆盖率有一定要求。下面针对golang自带的测试命令go test做讲解。 1 命令 1.1 go test ./… &#xff08;运行当前目录及所有子目录下的测试用例&#xff09; …

【virtual Box】功能速通:安装 Windows 和 Ubuntu

文章目录 一、虚拟机1.1 概述1.2 virtual box概述 二、新建虚拟机、删除、注册三、虚拟机内部设置3.1 安装增强功能驱动3.2 分辨率问题3.3 网络链接方式 一、虚拟机 1.1 概述 虚拟机&#xff08;Virtual Machine&#xff0c;VM&#xff09;是一种软件实现的计算机系统&#x…

【Nginx笔记02】通过Nginx服务器转发客户端的WebSocket接口到后端服务

这篇文章&#xff0c;主要介绍如何通过Nginx服务器转发客户端的WebSocket接口到后端服务【知识星球】。 目录 一、Nginx配置WebSocket 1.1、Nginx配置内容 1.2、客户端请求地址 1.3、创建WebSocket测试工程 1.4、启动测试 1.5、WebSocket超时问题 1.5.1、设置超时时间 …

计算机网络——IPV4数字报

1. IPv4数据报的结构 本结构遵循的是RFC 791规范&#xff0c;介绍了一个IPv4数据包头部的不同字段。 1.1 IPv4头部 a. 版本&#xff08;Version&#xff09;&#xff1a;指明了IP协议的版本&#xff0c;IPv4表示为4。 b. 头部长度&#xff08;IHL, Internet Header Length&…

图论基础(一)

一、图论 图论是数学的一个分支&#xff0c;它以图为研究对象。图论中的图是若干给定的点&#xff08;顶点&#xff09;以及连接两点的线&#xff08;边&#xff09;构成的图像&#xff0c;这种图形通常用来描述某些事物之间的某种特定关系&#xff0c;用点代表事物&#xff0c…

TPS54302 DCDC稳压电路设计与测试

原理图和PCB布局布线参考官方应用手册设计。 输入22V&#xff0c;输出5V-1A时电感发热&#xff0c;如果大于此输出功率建议更换大封装电感。 纹波测试 输出5V-1A情况下&#xff0c;输入电压在8-23V区间时纹波都在 20-40mv之间。当输入电压达到24V时纹波会变得很大&#xff0c…

DAY12_VUE基本用法详细版

目录 0 HBuilderX酷黑主题修改注释颜色1 VUE1.1 VUE介绍1.2 Vue优点1.3 VUE入门案例1.3.1 导入JS文件1.3.2 VUE入门案例 1.4 VUE基本用法1.4.1 v-cloak属性1.4.2 v-text指令1.4.3 v-html指令1.4.4 v-pre指令1.4.5 v-once指令1.4.6 v-model指令1.4.7 MVVM思想 1.5 事件绑定1.5.1…

架构设计:生产消费模型

1. 引言 在现代软件系统中&#xff0c;处理大量数据和消息是一项重要的任务。生产消费模型作为一种经典的并发模式&#xff0c;在解决数据生产和消费之间的关系上发挥着关键作用。该模型通过有效地管理生产者和消费者之间的通信和数据流动&#xff0c;实现了系统组件之间的解耦…

Mycat核心教程--Mycat 监控工具【四】

Mycat核心教程--Mycat 监控工具 九、Mycat 监控工具9.1.Mycat-web 简介9.2.Mycat-web 配置使用9.2.1.ZooKeeper 安装【上面有】9.2.2.Mycat-web 安装9.2.2.1.下载安装包9.2.2.2.安装包拷贝到Linux系统/opt目录下&#xff0c;并解压9.2.2.3.拷贝mycat-web文件夹到/usr/local目录…

[足式机器人]Part2 Dr. CAN学习笔记-Ch00-2 - 数学知识基础

本文仅供学习使用 本文参考: B站:DR_CAN 《控制之美(卷1)》 王天威 《控制之美(卷2)》 王天威 Dr. CAN学习笔记-Ch00 - 数学知识基础 Part2 4. Ch0-4 线性时不变系统中的冲激响应与卷积4.1 LIT System:Linear Time Invariant4.2 卷积 Convolution4.3 单位冲激 Unit Impulse—…

Stable Diffusion 模型分享:【Checkpoint】YesMix(动漫、2.5D)

本文收录于《AI绘画从入门到精通》专栏,专栏总目录:点这里。 文章目录 模型介绍生成案例案例一案例二案例三案例四下载地址模型介绍 条目内容类型大模型基础模型SD 1.5来源

11 PLL IP核

PLL IP 核简介 锁相环&#xff08;PLL&#xff09;作为一种反馈控制电路&#xff0c;其特点是利用外部输入的参考信号来控制环路内部震荡信号的频率和相位。因为锁相环可以实现输出信号频率对输入信号频率的自动跟踪&#xff0c;所以锁相环通常用于闭环跟踪电路。锁相环在工作…

Linux:Ansible的常用模块

模块帮助 ansible-doc -l 列出ansible的模块 ansible-doc 模块名称 # 查看指定模块的教程 ansible-doc command 查看command模块的教程 退出教程时候建议不要使用ctrlc 停止&#xff0c;某些shell工具会出现错误 command ansible默认的模块,执行命令&#xff0c;注意&#x…

32单片机基础:TIM定时中断

STM32中功能最强大&#xff0c;结构最复杂的一个外设——定时器 因为定时器的内容很多&#xff0c;所以本大节总共分为4个部分&#xff0c;8小节。 第一部分&#xff1a;主要讲定时器基本的定时功能,也就是定一个时间&#xff0c;然后让定时器每隔这个时间产生一个中断&#…

CSS 的盒模型

CSS 的盒模型 在HTML里&#xff0c;每一个元素就相当于是一个矩形的 “盒子” &#xff0c;这个盒子由以下这几个部分构成&#xff1a;1.边框border&#xff0c;2.内容content&#xff0c;3.内边距padding&#xff0c;4.外边距margin 边框border 基础属性描述border-width粗…

如何运行github上的项目

为了讲明白这个过程&#xff0c;特意做了一个相当来说比较好读懂的原理图&#xff0c;希望和我一样初学的小伙伴也能很快上手哈&#x1f60a; 在Github中找到想要部署的项目&#xff0c;这里以BartoszJarocki/CV&#xff08;线上简历&#x1f4c4;&#xff09;项目为例 先从头…