vue-router4 (六) 命名视图

命名视图可以使得同一级(同一个组件)中展示更多的路由视图,而不是嵌套显示, 命名视图可以让一个组件中具有多个路由渲染出口,这对于一些特定的布局组件非常有用。

应用场景:

比如点击login切换到组件A,点击reg切换到组件B+C就可以使用

const routes:Array<RouteRecordRaw> = [
    {
        path:"/",   //路径
        name:"Home",    //路由名称
        component: ()=>import("../components/Home.vue"),
        children:[
            {
                path:"/user1",   
                name:"A",   
                components:{
                    default:()=>import("../components/A.vue"),
                }
            },
            {
                path:"/user2",  
                name:"B",    
                components:{
                    bbb:()=>import("../components/B.vue"),
                    ccc:()=>import("../components/C.vue")
                }
            }
        ]
    }
]

对应Router-view 通过name 对应组件

 <div>
        <router-link to="/user1" style="margin-right: 20px;"> login</router-link>
        <router-link to="/user2"> reg</router-link>

        <!--默认的渲染出口,对应default中的组件-->
        <router-view></router-view>

        <!--具名路由:name展示components中对应名称的组件-->
        <router-view name="bbb"></router-view>
        <router-view name="ccc"></router-view>
    </div>

 注:在components中使用,后边有s

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Sqli-labs靶场第15关详解[Sqli-labs-less-15]自动化注入-SQLmap工具注入

Sqli-labs-Less-15 #自动化注入-SQLmap工具注入 SQLmap用户手册&#xff1a;文档介绍 - sqlmap 用户手册 由于这题是post请求&#xff0c;所以先使用burp进行抓包&#xff0c;然后将数据包存入txt文件中打包 用-r 选择目标txt文件 python sqlmap.py -r data.txt -current-db…

Java——数组的定义与使用

目录 一.数组的基本概念 1.什么是数组 2.数组的创建及初始化 3.数组的使用 二.数组是引用类型 1.初始JVM的内存分布 2.基本类型变量与引用类型变量的区别 3.再谈引用变量 4.认识 null 三.数组的应用场景 1.保存数据 2.作为函数的参数 2.1参数传基本数据类型 2.…

Python算法100例-3.3 阿姆斯特朗数

完整源代码项目地址&#xff0c;关注博主私信源代码后可获取 1.问题描述2.问题分析3.算法设计4.确定程序框架5.完整的程序6.问题拓展 1&#xff0e;问题描述 如果一个整数等于其各个数字的立方和&#xff0c;则该数称为“阿姆斯特朗数”&#xff08;亦称为自恋性数&#xff…

ubuntu20.04安装docker及运行

ubuntu20.04安装docker及运行 ubuntu环境版本 Ubuntu Focal 20.04 (LTS) 查看系统版本 rootubuntu20043:~# cat /proc/version Linux version 5.15.0-78-generic (builddlcy02-amd64-008) (gcc (Ubuntu 11.3.0-1ubuntu1~22.04.1) 11.3.0, GNU ld (GNU Binutils for Ubuntu) …

JAVA *数据库连接池 * 接JDBC

一.介绍: 数据库连接池实际上就是一个 " 容器 " 当有多个拥护需要访问数据库的时候, 一个用户会打开一个数据库连接, 但是!当用户离开的时候,就会断开数据库连接,那么数据库连接就作废了,之后如果还有用户需要进行访问,需要再建立一个数据库连接......循环往复, …

(Linux学习四)用户权限介绍以及操作UGO(一)

用户提权 su永久提权&#xff1a; su - root //-加不加- 都可以 - 后面可以加变量 su root //su - root //切换root权限&#xff0c;需要输入密码 exit //登出 root 再次exit退出shellsudo 临时提权&#xff1a;部分特权语法&#xff1a;user MACHIN…

MySQL相关知识汇总

MySQL是一个广泛使用的开源关系型数据库管理系统&#xff0c;它以其高性能、稳定性和易用性而备受开发者喜爱。在软件开发领域&#xff0c;无论是大型项目还是小型应用&#xff0c;MySQL都扮演着重要的角色。本文将对MySQL的一些关键知识点进行汇总&#xff0c;帮助读者更好地了…

type-alisaea-package

type-alisaea-package : 是自动配置别名&#xff0c;也就是设置这个之后&#xff0c;在Mybatis的Mapper文件里就可以写对应的类名&#xff0c;而不用写全路径名了 ; 作用 : 简化xml文件中resultType中指定路径配置 ; 如何配置 : 在springboot项目中的application.yaml文…

【网站项目】219一中体育馆管理系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

EasyRecovery16电脑硬盘数据恢复软件功能详解

在数字化时代&#xff0c;人们在日常生活和工作中越来越依赖于电脑和移动设备。不管是个人用户还是企业&#xff0c;数据的重要性都不言而喻。然而&#xff0c;数据丢失和损坏的风险也随之增加&#xff0c;因此&#xff0c;数据恢复软件的需求也日益增长。 EasyRecovery 16是一…

transformer--编码器2(前馈全连接层、规范化层、子层链接结构、编码器层、编码器)

前馈全连接层 什么是前馈全连接层: 在Transformer中前馈全连接层就是具有两层线性层的全连接网络 前馈全连接层的作用: 考虑注意力机制可能对复杂过程的拟合程度不够,通过增加两层网络来增强模型的能力 code # 前馈全连接层 class PositionwiseFeedForward(nn.Module):de…

电机的极数和槽数,机械角度和电角度,霍尔IC,内外转子

什么是电机的极数和槽数&#xff1f; 【第7集】② 正弦波驱动的转矩脉动、正弦电流的时序和相位变化、超前角控制&#xff08;超前角调整&#xff09;、正弦波驱动的各种波形 - 电源设计电子电路基础电源技术信息网站_罗姆电源设计R课堂 (rohm.com.cn) 下面为您介绍表示电机…

[计算机网络]--I/O多路转接之poll和epoll

前言 作者&#xff1a;小蜗牛向前冲 名言&#xff1a;我可以接受失败&#xff0c;但我不能接受放弃 如果觉的博主的文章还不错的话&#xff0c;还请点赞&#xff0c;收藏&#xff0c;关注&#x1f440;支持博主。如果发现有问题的地方欢迎❀大家在评论区指正 目录 一、poll函…

前端开发中的浏览器兼容性问题及解决方案

前言 在之前的文章中&#xff0c;我们学习了前端开发中的网站性能提升的相关内容。在本文中&#xff0c;我们将深入探讨一个前端开发者必须面对的问题&#xff1a;浏览器兼容性问题。我们将介绍什么是浏览器兼容性问题&#xff0c;为什么会发生这种问题&#xff0c;以及如何解决…

ArrayBlockingQueue 数组阻塞队列 源码阅读

1. 概述 数组阻塞队列 有界的阻塞数组, 容量一旦创建, 无法修改阻塞队列, 队列满的时候, 往队列put数据会被阻塞, 队列空, 取数据也会被阻塞并发安全 2. 数据结构 /** 存储队列元素的数组 */ /** 存储队列元素的数组 */ final Object[] items;/** 队首位置&#xff0c;下一…

D2BNet

task-specific contextual information {M l _l l​} that we split into { M l m , M l a M_l^m,M_l^a Mlm​,Mla​} 辅助信息 作者未提供代码

基于Spring Boot+Vue的旅游网站

末尾获取源码作者介绍&#xff1a;大家好&#xff0c;我是墨韵&#xff0c;本人4年开发经验&#xff0c;专注定制项目开发 更多项目&#xff1a;CSDN主页YAML墨韵 学如逆水行舟&#xff0c;不进则退。学习如赶路&#xff0c;不能慢一步。 目录 一、项目简介 二、开发技术与环…

Fastwhisper + Pyannote 实现 ASR + 说话者识别

文章目录 前言一、faster-whisper简单介绍二、pyannote.audio介绍三、faster-whisper pyannote.audio 实现语者识别四、多说几句 前言 最近在研究ASR相关的业务&#xff0c;也是调研了不少模型&#xff0c;踩了不少坑&#xff0c;ASR这块&#xff0c;目前中文普通话效果最好的…

ASM处理字节码流程

ASM处理字节码流程 ASM是一个操作Java字节码类库&#xff0c;其操作的对象是字节码数据&#xff0c;处理字节码方式是“拆分-修改-合并”。 将.class文件拆分成多个部分 对某一个部分的信息进行修改 将多个部分重新组织成一个新的class文件

机器学习-4

文章目录 前言数组创建切片索引索引遍历切片编程练习 总结 前言 本篇将介绍数据处理 Numpy 库的一些基本使用技巧&#xff0c;主要内容包括 Numpy 数组的创建、切片与索引、基本运算、堆叠等等。 数组创建 在 Python 中创建数组有许多的方法&#xff0c;这里我们使用 Numpy 中…