(四十三)Vue Router之嵌套路由

文章目录

  • 什么是嵌套路由
  • 嵌套路由的使用
  • demo

上一篇:(四十二)Vue之路由及其基本使用Vue Router
下一篇:(四十四)Vue Router的命名路由和路由组件传参

什么是嵌套路由

实际生活中的应用界面,有可能由多层嵌套的组件组合而成。同样地,URL 中各段动态路径也按某种结构对应嵌套的各层组件,例如:

/user/foo/profile                     /user/foo/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

在Vue.js中,Vue Router提供了嵌套路由的功能,允许您在应用程序中创建层次化的路由结构。通过嵌套路由,可以在父路由下定义子路由,从而实现更复杂的页面组织和导航。

嵌套路由的使用

配置路由规则,使用children配置项配置子路由,children接收一个数组的routes配置,这里的path配置有两种形式:

  • 相对路径形式
    使用相对路径形式时,path属性的值是相对于父路由的路径。这意味着它会在父路由的路径后面添加子路径。
    例如,如果父路由的路径是/parent,子路由的path为’child’,那么完整的路径将是/parent/child。
  • 绝对路径形式
    使用绝对路径形式时,path属性的值是相对于根路径的路径。这意味着无论当前路由的路径如何,子路由都将以根路径开头。绝对路径需要在路径前面添加斜杠/。
    例如,如果根路径是’/‘,子路由的path为’/child’,那么完整的路径将是/child。
routes:[{path:'/page1',component:Page1,},{path:'/page2',component:Page2,children:[ //通过children配置子级路由{path:'page21', //相对路径形式component:Page21},{path:'/page2/page22',//绝对路径形式component:Page22}]}]

demo

使用(四十二)Vue之路由及其基本使用Vue Router的demo继续改造,在home组件加入嵌套的组件

home组件:

<template><div><h2>我是Home的内容</h2><div><ul class="nav nav-tabs"><li><router-link class="list-group-item" active-class="active" to="/home/news">News</router-link></li><li><router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link></li></ul><router-view></router-view></div></div>
</template><script>
export default {// eslint-disable-next-line vue/multi-word-component-namesname: "Home",
}
</script><style scoped></style>

Message组件:

<template><div><ul><li><a href="/message1">message001</a>&nbsp;&nbsp;</li><li><a href="/message2">message002</a>&nbsp;&nbsp;</li><li><a href="/message/3">message003</a>&nbsp;&nbsp;</li></ul></div>
</template><script>export default {// eslint-disable-next-line vue/multi-word-component-namesname:'Message'}
</script>

News组件:

<template><ul><li>news001</li><li>news002</li><li>news003</li></ul>
</template><script>export default {// eslint-disable-next-line vue/multi-word-component-namesname:'News'}
</script>

路由配置:

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '@/pages/About'
import Home from '@/pages/Home'
import Message from '@/pages/Message'
import News from '@/pages/News'
//创建并暴露一个路由器
export default new VueRouter({routes:[{path:'/about',component:About},{path:'/home',component:Home,children:[{path:'news',component:News,},{path:'/home/message',component:Message,}]}]
})

效果:
在这里插入图片描述
在这里插入图片描述

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

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

相关文章

服务器部署与DDOS攻防

知识点&#xff1a;DHPC与Web服务部署&#xff0c;DHCPig攻防&#xff0c;SYN Flooding测试 DHCP&#xff1a; 能够自动为客户机获取IP等参数 DHCP是动态主机配置协议&#xff08;Dynamic Host Configuration Protocol&#xff09;的缩写&#xff0c;它是一种网络管理协议&am…

epoch和batch的区别

在机器学习和深度学习中&#xff0c;“epoch”&#xff08;批次&#xff09;和"batch"&#xff08;批量&#xff09;是两个重要的概念&#xff0c;它们分别表示训练过程中的不同阶段和数据处理方式。 Epoch&#xff08;批次&#xff09; 定义&#xff1a;Epoch&…

935.骑士拨号器 - 力扣

935.骑士拨号器 - 力扣 题目链接&#xff1a;935. 骑士拨号器 - 力扣&#xff08;LeetCode&#xff09; 题目&#xff1a; 示例 1&#xff1a; 输入&#xff1a;n 1 输出&#xff1a;10 解释&#xff1a;我们需要拨一个长度为1的数字&#xff0c;所以把骑士放在10个单元格中…

Spring AI 调用 openAI 进行语音朗读(文本转语音,TTS)

项目搭建&#xff1a; 参考 Spring AI 介绍以及与 Spring Boot 项目整合 编写 Controller 接口 创建一个 Controller 类&#xff0c;例如 TranscriptionController。在该类中&#xff0c;注入 Resource。编写一个接口&#xff0c;例如 //&#xff0c;用于处理语音转录请求。…

多接口分线盒在工业自动化中的重要性与应用

简介 多接口分线盒是现代工业自动化中不可或缺的一个组成部分&#xff0c;它主要用于简化复杂的接线系统&#xff0c;提高效率和可靠性。本文将详细探讨多接口分线盒的定义、功能、以及在工业自动化中的应用情况。 无源多接口分线盒 多接口分线盒的定义与功能 多接口分线盒是…

qt文件断点续传+nodejs搭建本地服务器

文章目录 nodejs服务器搭建qt代码 用nodjs来搭建一个本地的服务器&#xff0c;用qt编写程序实现文件的上传和断点续传的功能 nodejs服务器搭建 先去安装一个nodejs&#xff0c;然后在文件夹中npm init -y初始化nodejs项目,npm install express multer安装所需要的包&#xff…

嵌入式工程师从0开始,到底该学什么,怎么学

在开始前刚好我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「嵌入式的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“666”之后私信回复“666”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#xff01;嵌入式是个大筐&#xff0…

基于springboot实现宠物商城网站管理系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现宠物商城网站管理系统演示 摘要 传统信息的管理大部分依赖于管理人员的手工登记与管理&#xff0c;然而&#xff0c;随着近些年信息技术的迅猛发展&#xff0c;让许多比较老套的信息管理模式进行了更新迭代&#xff0c;商品信息因为其管理内容繁杂&#xff…

Windows Nginx更新版本

一、准备新版安装包 nginx: downloadhttps://nginx.org/en/download.html 二、升级Nginx 1、备份原Nginx 2、上传新版Nginx 上传并解压 3、更新版本 1&#xff09;原文件夹更新 1.关闭nginx 查看原版本号 nginx -v 命今关闭 nginx -s stop 确认进程里没有nginx&#…

【每日刷题】Day76

【每日刷题】Day76 &#x1f955;个人主页&#xff1a;开敲&#x1f349; &#x1f525;所属专栏&#xff1a;每日刷题&#x1f34d; &#x1f33c;文章目录&#x1f33c; 1. 561. 数组拆分 - 力扣&#xff08;LeetCode&#xff09; 2. 删除有序链表中重复的元素-II_牛客题霸…

论文学习_基于导向式模糊测试的二进制程序漏洞验证方法

1. 引言 研究背景及现存问题:基于代码相似性比较的漏洞检测方法属于静态分析方法,不可避免地存在误报率高的问题,对静态检测方法得到的疑似漏洞代码进行人工分析存在工作量大, 效率低的问题。解决该问题的有效的方案之一是使用导向式模糊测试方法,生成能够执行到疑似漏洞…

【FFmpeg】avformat_open_input函数

【FFmpeg】avformat_open_input函数 1.avformat_open_input1.1 初始化输入格式&#xff08;init_input&#xff09;1.1.1 文件路径判断格式&#xff08;av_probe_input_format2&#xff09;1.1.1.1 格式探测&#xff08;read_probe&#xff09;1.1.1.2 扩展匹配检查&#xff08…

Pyecharts进阶篇

欢迎观看Pyecharts部分&#xff0c;上一节&#xff1a;Pyecharts入门-CSDN博客 本章节&#xff0c;我们会使用全国空气质量数据呈现中国地图&#xff0c;还会使用全球各个国家或地区GDP数据绘制全球地图。 全国空气质量分布图 数据准备 import pandas as pd import numpy a…

美国唱片公司以侵犯版权为由起诉人工智能音乐生成器

美国唱片公司以侵犯版权为由起诉人工智能音乐生成器 全球最大的几家唱片公司正联手将两家著名的人工智能音乐制作公司告上法庭&#xff0c;此举正值生成式人工智能继续渗透到音乐行业之际。 环球音乐集团、索尼音乐娱乐和华纳音乐集团等公司周一对Suno和音频制造商Uncharted …

树莓派4B_OpenCv学习笔记13:OpenCv颜色追踪_程序手动调试HSV色彩空间_检测圆

今日继续学习树莓派4B 4G&#xff1a;&#xff08;Raspberry Pi&#xff0c;简称RPi或RasPi&#xff09; 本人所用树莓派4B 装载的系统与版本如下: 版本可用命令 (lsb_release -a) 查询: Opencv 版本是4.5.1&#xff1a; OpenCv颜色追踪_程序手动调试HSV色彩空间_检测灰度图中的…

AI新热点:边云协同:大模型结合小模型(大小模型联合推理)

背景 AI模型规模不断剧增已是不争的事实。模型参数增长至百亿、千亿、万亿甚至十万亿&#xff0c;大模型在算力推动下演变为人工智能领域一场新的“军备竞赛”。 这种竞赛很大程度推动了人工智能的发展&#xff0c;但随之而来的能耗和端侧部署问题限制了大模型应用落地。2022…

4. ansible角色

ansible角色 一、ansible角色 role1、创建角色2、角色目录结构 二、部署zabbix-agent1、创建角色2、编写剧本3、执行角色中的操作 三、部署分布式zabbix1、zabbixproxy角色结构2、zabbixProxy task/main.yml3、zabbixAgentByProxy角色结构4、zabbixAgentByProxy tasks/main.yml…

非极大值抑制算法(Non-Maximum Suppression,NMS)

https://tcnull.github.io/nms/ https://blog.csdn.net/weicao1990/article/details/103857298 目标检测中检测出了许多的候选框&#xff0c;候选框之间是有重叠的&#xff0c;NMS作用重叠的候选框只保留一个 算法&#xff1a; 将所有候选框放入到集和B从B中选出分数S最大的b…

ubuntu安装QT

以QT5.15.14为例 下载地址&#xff1a;Index of /archive/qt 安装步骤&#xff1a; 解压qt-everywhere-src-5.15.14运行&#xff1a; cd qt-everywhere-src-5.15.14 mkdir build cd build ../configure -prefix /opt/qt5.15.14 -opensource -confirm-license make -j16 sudo…