vue-router学习4:嵌套路由

一些应用程序的 UI 由多层嵌套的组件组成。在这种情况下,URL 的片段通常对应于特定的嵌套组件结构。

定义子路由组件 

首先,你需要为嵌套路由创建对应的子组件。这些组件将在父路由组件的 <router-view></router-view> 中被渲染。

<!-- ChildComponent.vue -->  
<template>  <div>  <!-- 子组件的内容 -->  <p>This is a child component.</p>  </div>  
</template>  <script lang="ts">  
import { defineComponent } from 'vue';  export default defineComponent({  // ...  
});  
</script>

配置嵌套路由

 在路由配置文件中,你需要为父路由指定 children 属性,它是一个包含子路由定义的数组。子路由的 path 不需要以斜杠 / 开头,因为它们会被视为相对于父路由的路径。

// router/index.ts  
import { createRouter, createWebHistory } from 'vue-router';  
import ParentComponent from '../views/ParentComponent.vue';  
import ChildComponent from '../views/ChildComponent.vue';  const routes = [  {  path: '/parent',  name: 'Parent',  component: ParentComponent,  children: [  {  path: 'child', // 注意这里不以斜杠开头  name: 'Child',  component: ChildComponent  }  // 可以继续添加更多子路由...  ]  }  // ...其他路由配置  
];  const router = createRouter({  history: createWebHistory(process.env.BASE_URL),  routes  
});  export default router;

 在父组件中使用 <router-view>

在父路由组件的模板中,你需要使用 <router-view></router-view> 来指定子路由组件的渲染位置。

<!-- ParentComponent.vue -->  
<template>  <div>  <!-- 父组件的内容 -->  <p>This is the parent component.</p>  <!-- 子路由组件将在这里渲染 -->  <router-view></router-view>  </div>  
</template>  <script lang="ts">  
import { defineComponent } from 'vue';  export default defineComponent({  // ...  
});  
</script>

导航到嵌套路由 

你可以通过编程式导航(使用 router.push 方法)或声明式导航(使用 <router-link> 组件)来导航到嵌套路由。

<!-- 声明式导航 -->  
<router-link to="/parent/child">Go to Child</router-link>

或者

<script setup>// 编程式导航  import {useRouter} from 'vue-router';const router = useRouter();const goToChild = () => {router.push({name: 'Child'});};}
</script>

 

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

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

相关文章

AI自动生成PPT文档 aippt的API介绍文档

官方链接直达&#xff01; 产品介绍​ 能力介绍​ AiPPT 是一款智能生成演示幻灯片的在线工具。专业设计团队打造海量模板资源&#xff0c;输入标题即可轻松生成完整的PPT。同时 AiPPT 支持导入多格式文档一键生成 PPT&#xff0c;让 PPT 创作更加高效。聚焦于内容&#xff0…

安装zabbix server

目录 1、实验环境 2、yum 安装zabbix server 2.1 解决权限问题和放行流量 2.2 安装zabbix-server 1、实验环境 操作系统rhel8zabbix6.0TLS数据库mysql8.0.30IP地址192.168.81.131时间配置NTP时间服务器同步 2、yum 安装zabbix server 如果通过yum源安装&#xff0c;操作系…

SysetmUI开机是否显示Keyguard的流程

KeyguardViewMediator的onSystemReady方法 没有启用keyguard时KeyguardViewMediator的log&#xff1a; onSystemReady 方法 doKeyguardLocked LockPatternUtils.isLockScreenDisabled 来判断是否启用 public final static String DISABLE_LOCKSCREEN_KEY "lockscreen.…

深度学习——Transformer的理解整理

一、答主1 机器翻译 transformer刚被提出的时候就是被用于处理机器翻译的。在transformer架构中的不同位置Q&#xff0c;K&#xff0c;V指代的变量是不一样的。 假设现在处理的是英文->德文的翻译任务。 在encoder的输入端&#xff0c;这里执行的是self-attention&#x…

说说redis的集群的原理吧

为什么redis集群这么牛&#xff1f;为什么其拥有那么多的优点了&#xff1f;为什么大厂用的都是redis集群&#xff1f; 因为其 1.高可用 2.高性能 3.数据容错性 4.数据持久化 5.线性扩展 6.客户端重定向 为什么有以上这么多优势了&#xff1f; 其实跟redis集群背后的原理有关&a…

信息化工作人员必备常识4——ping命令详解【不间断发包自定义发包的大小自定义发包次数】

信息化工作人员必备常识4——ping命令详解【不间断发包&自定义发包的大小&自定义发包次数】 前言回顾pingtelnetnslookup命令 ping 命令详解帮助手册不间断向目标 IP 发送数据包 -t定义发送数据包的大小 -l-t&-l 验证网络承载能力自定义发送数据包的次数统计响应时…

[BT]BUUCTF刷题第20天(4.22)

第20天 Web [GWCTF 2019]我有一个数据库 打开网站发现乱码信息&#xff08;查看其他题解发现显示的是&#xff1a;我有一个数据库&#xff0c;但里面什么也没有~ 不信你找&#xff09; 但也不是明显信息&#xff0c;通过dirsearch扫描得到robots.txt&#xff0c;然后在里面得…

51单片机数字温度报警器_DS18B20可调上下限(仿真+程序+原理图)

数字温度报警器 1 **主要功能&#xff1a;*****\*资料下载链接&#xff08;可点击&#xff09;&#xff1a;\**** 2 **仿真图&#xff1a;**3 **原理图&#xff1a;**4 **设计报告&#xff1a;**5 **程序设计&#xff1a;**主函数外部中断函数DS18B20驱动 6 讲解视频7 **资料清…

OSPF的七种LSA类型

OSPF的LSA类型 在OSPF协议中&#xff0c;使用LSA来传递路由信息和拓扑信息&#xff0c;因此了解不同的LSA的内容和其功能&#xff0c;对了解OSPF协议的路由形成有很大帮助。这里的OSPF是v2版本&#xff0c;只针对IPv4来讲。 描述一条LSA的三要素&#xff1a; ADV Router产生者…

上海亚商投顾:沪指震荡调整 油气等周期股集体下挫

上海亚商投顾前言&#xff1a;无惧大盘涨跌&#xff0c;解密龙虎榜资金&#xff0c;跟踪一线游资和机构资金动向&#xff0c;识别短期热点和强势个股。 一.市场情绪 沪指昨日震荡调整&#xff0c;深成指、创业板指小幅走弱。军工板块逆势拉升&#xff0c;中船应急、捷安高科、…

ORACLE数值相关的sql语句

ORACLE数值相关的sql语句 引言1. 基础数值运算2. 数值函数应用2.1 精确数值函数2.2 绝对值函数 ABS() 3. 判断和转换数值4. 聚合数值字段5. 数值范围查询总结 引言 在Oracle数据库中&#xff0c;处理数值数据是一项常见的任务&#xff0c;不论是进行简单的数学运算&#xff0c;…

simlab python二次开发2-一键生成轴瓦并设定节点号

simlab python二次开发2-一键生成轴瓦并设定节点号 1、节点坐标计算并建立1.1、建坐标原点节点&#xff0c;并得到Model-1.gda1.2、轴瓦节点计算并建立 2、由节点建面2.1、由4个节点建面得到3个面单元Body2.2、得到Bodies名称2.3、根据Bodies名称选面特征&#xff08;放入Group…

JavaScript介绍

JavaScript&#xff08;简称“JS”&#xff09;是一种具有函数优先的轻量级&#xff0c;解释型或即时编译型的编程语言。它最初由Netscape公司的Brendan Eich在1995年设计实现&#xff0c;用于为网页添加动态效果和交互功能。作为开发Web页面的脚本语言而出名&#xff0c;但它也…

AR爆发的前夜,Rokid站在了门口

文&#xff5c;刘俊宏 摆脱6寸的手机屏幕&#xff0c;栖居在300寸大屏的智慧生活是什么样子&#xff1f; 4月20日&#xff0c;Rokid在新品AR Lite空间计算套装的发布会上&#xff0c;“硬刚”了苹果的Vision Pro。 Rokid AR Lite空间计算套装 Rokid AR Lite与苹果Vision Pro…

el-upload组件如何上传blob格式的url地址视频

el-upload组件如何上传blob格式的url地址视频 一、存在问题二、直接上代码 需求&#xff1a;想把视频地址url:“blob:http://localhost:8083/65bd3c0f-52ec-4844-b85e-06fdb5095b7b”&#xff0c;通过el-upload组件上传 el-upload是Element UI中用于文件上传的组件&#xff0c;…

中文医疗大模型及中文底座大模型参考

参考&#xff1a;https://github.com/HqWu-HITCS/Awesome-Chinese-LLM 中文底座大模型 中文医疗大模型

c#学习入门1

一、环境配置 颜色主题 字体设置 行号设置 二、第一个应用程序 1. 在解决方案下创建一个新项目 第一种注释&#xff1a;两杠注释 第二种注释&#xff1a;星号注释 第三种注释&#xff1a;三杠注释(只有在花括号后面输出才会自动补全&#xff09; 2.控制台输入打印基础语句 输…

第⑯讲:Ceph集群Pool资源池管理以及PG的数据分布的核心技术要点

文章目录 1.Pool资源池的管理1.1.查看Pool资源池列表1.2.创建一个Pool资源池1.3.查看Pool资源池的参数信息1.4.修改Pool资源池的参数信息1.5.为Pool资源池设置应用模式1.6.重命名Pool资源池1.7.设置Pool资源池的限额1.8.删除Pool资源池1.9.查看Pool资源池的利用率 2.PG的数据分…

产品经理必会12个产品模型

很多运营经理&#xff0c;常常觉得产品成功的决定性因素是“产品做得好”。 而很多产品经理却认为&#xff0c;产品互抄太严重了&#xff0c;差异化的竞争要点是“产品运营得好”。 在商业高速发展时代&#xff0c;成功产品定义往往不是单点成功&#xff0c;而是由3大要素共同…

统计单词数量(文件)(*)

请编写函数&#xff0c;统计英文文章的单词数量。 函数原型 int CountWord(FILE *f); 说明&#xff1a;参数 f 为文件指针。函数值为该文件的单词数量。 裁判程序 #include <stdio.h> #include <stdlib.h> #include <ctype.h>int CountWord(FILE *f);in…