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

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

相关文章:

  • 在SAP HANA中使用OData(二)
  • 矩阵的范数 matrix norm Frobenius norm 弗罗贝尼乌斯 范数
  • vscode与vue/react环境配置
  • Langchain 加载网络信息实现RAG以及UnstructuredURLLoader的使用
  • MCU最小系统电路设计(以STM32F103C8T6为例)
  • Unity接入SQLite (三):C#封装SQL命令
  • 蓝桥杯倒计时47天!DFS基础——图的遍历
  • 如何将域名解析成IP地址?
  • EfficientSAM | 借助MIM机制,MetaAI让SAM更高效!
  • 编程笔记 html5cssjs 092 JavaScript 表单控件
  • 防火墙的内容安全
  • 顶顶通呼叫中心中间件-如何使处于机器人话术中的通话手动转接到坐席分机上讲解(mod_cti基于FreeSWITCH)
  • Qt篇——QTableWidget保存表格数据到Excel文件中,读Excel内容到QTableWidget
  • 人工智能之Tensorflow程序结构
  • 信息安全计划
  • 【编码】-360实习笔试编程题(二)-2016.03.29
  • 【跃迁之路】【444天】程序员高效学习方法论探索系列(实验阶段201-2018.04.25)...
  • ES6语法详解(一)
  • HTML5新特性总结
  • JavaScript 基础知识 - 入门篇(一)
  • JS 面试题总结
  • leetcode讲解--894. All Possible Full Binary Trees
  • Mac 鼠须管 Rime 输入法 安装五笔输入法 教程
  • MySQL数据库运维之数据恢复
  • PHP的Ev教程三(Periodic watcher)
  • php的插入排序,通过双层for循环
  • ReactNative开发常用的三方模块
  • Solarized Scheme
  • Stream流与Lambda表达式(三) 静态工厂类Collectors
  • 工作中总结前端开发流程--vue项目
  • 关于Java中分层中遇到的一些问题
  • 基于axios的vue插件,让http请求更简单
  • 解决jsp引用其他项目时出现的 cannot be resolved to a type错误
  • 前端代码风格自动化系列(二)之Commitlint
  • 前端技术周刊 2019-02-11 Serverless
  • 如何胜任知名企业的商业数据分析师?
  • 数据可视化之 Sankey 桑基图的实现
  • Mac 上flink的安装与启动
  • ​马来语翻译中文去哪比较好?
  • # Java NIO(一)FileChannel
  • #14vue3生成表单并跳转到外部地址的方式
  • #宝哥教你#查看jquery绑定的事件函数
  • #在 README.md 中生成项目目录结构
  • (编程语言界的丐帮 C#).NET MD5 HASH 哈希 加密 与JAVA 互通
  • (附程序)AD采集中的10种经典软件滤波程序优缺点分析
  • (论文阅读23/100)Hierarchical Convolutional Features for Visual Tracking
  • (免费领源码)Python#MySQL图书馆管理系统071718-计算机毕业设计项目选题推荐
  • (一)VirtualBox安装增强功能
  • (中等) HDU 4370 0 or 1,建模+Dijkstra。
  • (转) SpringBoot:使用spring-boot-devtools进行热部署以及不生效的问题解决
  • (转)jdk与jre的区别
  • (转)从零实现3D图像引擎:(8)参数化直线与3D平面函数库
  • .bat批处理(九):替换带有等号=的字符串的子串
  • .NET 使用 ILMerge 合并多个程序集,避免引入额外的依赖
  • .net的socket示例