Vue3-30-路由-嵌套路由的基本使用

什么是嵌套路由

嵌套路由 :就是一个组件内部还希望展示其他的组件,使用嵌套的方式实现页面组件的渲染。
就像 根组件 通过路由渲染 普通组件一样,嵌套路由也是一样的道理。

嵌套路由的相关关键配置

1、<router-view> 标签 声明 被嵌套组件 的渲染位置;
2、路由配置表中使用 children:[] 来声明 嵌套的子路由;
3、子路由 的path属性 中不可以带 /,否则无法匹配!
4、嵌套路由可以无限嵌套。

嵌套路由的语法格式

  {path:'/a', // 父级路由path 要有 / name:'aroute',component:componentA,children:[{path:'b', // 子路由的path中 不可以有 /name:'broute',component:componentB,},... 还可以添加其他的子路由对象]}

写一个案例来看看

案例的项目结构

projectName| -- src| -- App.vue| - componentA.vue| - componentB.vue| - componentC.vue| -- router.ts # 路由的配置文件| -- index.html

路由配置 router.ts

// 导入 定义路由的两个方法
import {createRouter,createWebHistory}  from 'vue-router'// 引入两个组件
import componentA from "./componentA.vue";
import componentB from "./componentB.vue";
import componentC from "./componentC.vue";// 声明路由跳转的路径与组件的对应关系
const routsList = [{path:'/a',name:'aroute',component:componentA,children:[{path:'b',name:'broute',component:componentB,children:[{path:'c',name:'croute',component:componentC},]},]},
]// 创建路由的实例对象
const routerConfigObj = createRouter({history:createWebHistory('abc'), // 带一个参数,表示是路由的一个前缀routes:routsList // 指定路由的配置列表
})// 导出路由的对象
export default routerConfigObj;

App.vue 中的跳转逻辑代码

有一个按钮,点击跳转到一个嵌套的路由中去

<template><div class="basediv">APP.vue 中的 msg : {{ msg }}<br>   <button @click="pushToB">路由到组件B</button><!-- <br> --><br><br><br><br><!-- router-view 进行目标组件的展示 --><router-view></router-view></div></template><script setup lang="ts">// 引入 provide 方法import { ref } from 'vue'// 引入路由配置实例 与 当前路由对象import { useRouter } from 'vue-router';// 声明父组件的一个变量const msg = ref('这是App根组件的msg变量')// 接收一下路由实例对象 和 当前路由 对象const routerObj = useRouter();// 路由跳转到 B组件的处理方法const pushToB = ()=>{routerObj.replace({path:'/a/b',query:{p3:'vue3',p4:'路由的跳转'}})}    </script><style scoped>.basediv{width: 600px;height: 400px;border: 1px solid red;}
</style>

componentA.vue

componentB.vue 和componentA.vue的代码一致;
componentC.vue 中 没有 <router-view>标签

<template><div class="diva">这是组件A<br><!-- 子组件的展示位置 --><router-view></router-view></div></template><script setup lang="ts">// 引入两个路由相关的方法import { useRouter,useRoute} from 'vue-router';// 声明 路由实例对象 和 当前路由对象const routerObj = useRouter()const currentRoute = useRoute()// 打印一下路由实例对象 和 当前路由对象console.log('A 组件 中 路由实例对象 :',routerObj)console.log('A 组件 中 当前路由对象 :',currentRoute)</script><style scoped>.diva{width: 300px;height: 200px;background: red;}
</style>

运行效果

1、初始状态

在这里插入图片描述

2、浏览器地址栏中直接输入地址进行路由

在这里插入图片描述

3、点击按钮进行路由

在这里插入图片描述

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

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

相关文章

在 Spring 中操作 Redis

&#x1f9f8;欢迎来到dream_ready的博客&#xff0c;&#x1f4dc;相信您对博主首页也很感兴趣o (ˉ▽ˉ&#xff1b;) &#x1f4dc;redis和缓存及相关问题和解决办法 什么是缓存预热、缓存穿透、缓存雪崩、缓存击穿 目录 1、引入依赖 2、对 Redis 的配置文件进行书写 3、S…

kivy PageLayout 的说明及例子

PageLayout 是 Kivy GUI 框架中的一个布局管理器&#xff0c;它允许开发者在同一个窗口中放置多个页面&#xff0c;用户可以通过滑动来浏览这些页面。PageLayout 的工作方式类似于一个可以滑动的标签页&#xff08;TabbedPanel&#xff09;&#xff0c;但其页面可以自由调整大小…

【Python_PySide2学习笔记(二十二)】进度对话框QProgressDialog类的基本用法

进度对话框QProgressDialog类的基本用法 进度对话框QProgressDialog类的基本用法前言一、QProgressDialog 的常用方法1、创建进度对话框2、进度对话框设置窗口标题3、进度对话框隐藏"最大化"、"最小化"、"关闭"4、进度对话框设置是否自动关闭5、…

Atlas Hook 导入 Hive 元数据

Atlas 部署之后就可以导入 Hive 元数据&#xff0c;这部分工作由 Atlas 组件 Hook 来完成。初次导入 Hive 元数据需要通过执行 shell 脚本来完成&#xff0c;然后&#xff0c;Atlas 就可以自动同步增量元数据信息了。下面我介绍一下如何完成这些工作。 初次导入 Hive 元数据 …

LLM、AGI、多模态AI 篇一:开源大语言模型简记

文章目录 系列开源大模型LlamaChinese-LLaMA-AlpacaLlama2-ChineseLinlyYaYiChatGLMtransformersGPT-3(未完全开源)BERTT5QwenBELLEMossBaichuan

使用Py2neo进行Neo4j图数据库的增删改查操作

使用Py2neo进行Neo4j图数据库的增删改查操作 Neo4j 是一个高效的图形数据库管理系统&#xff0c;它将数据结构存储为图形而非表格。Py2neo 是一个客户端库&#xff0c;用于使用 Python 语言与 Neo4j 交互。它提供了一系列简单易用的 API&#xff0c;使得在 Python 中进行图形数…

Linux常用命令大全总结及讲解(超详细版)

前言&#xff1a; Linux 是一个基于Linux 内核的开源类Unix 操作系统&#xff0c;Linus Torvalds于 1991 年 9 月 17 日首次发布的操作系统内核。Linux 通常打包为Linux 发行版。 Linux 最初是为基于Intel x86架构的个人计算机开发的&#xff0c;但此后被移植到的平台比任何其…

K8S 中对 Windows 节点的利用

目录 漏洞概述 漏洞详情 ​编辑 漏洞验证 补丁分析 在集群中探索 参考资料 在许多组织中&#xff0c;所运行的很大一部分服务和应用是 Windows 应用。Windows 容器提供了一种封装进程和包依赖项的方式&#xff0c;从而简化了 DevOps 实践&#xff0c;令 Windows 应用程序…

【xdma】 pcie.bar设置

FPGA优质开源项目– PCIE通信 xdma 两者保持一致 FPGA开源项目 – PCIE I/O控制卡 xdma PCIe的XDMA应用 读写部分分为两种&#xff0c;一种是数据的读写&#xff0c;另一种是配置数据的读写&#xff0c;在数据读写部分&#xff0c;DMA通过MIG控制DDR完成数据读写。配置数据…

2023年终总结及计划

2023年在今晚就要过去&#xff0c;唯一的感受就一个字&#xff1a;快&#xff01;还没什么感觉就过去了。今年总体感觉自己在忙忙碌碌&#xff0c;为了某个节点冲刺熬夜加班&#xff0c;但是最终收获甚微。夜深人静&#xff0c;又该到了静下来想想的时候了。 一、收获 1、生活…

使用 Tkinter 制作一个进制转换工具,好用!

在平时工作学习当中&#xff0c;我们经常会编写一些简单的 Python GUI 工具&#xff0c;以此来完成各种各样的自动化任务&#xff0c;比如批量处理文件&#xff0c;批量处理图片等等。当我们进行这些工具的编写之时&#xff0c;往往只关注了功能的实现&#xff0c;而忽略了页面…

加速写代码的板子

加速写代码的板子 计算中位数整合字符串 计算中位数 先说结论&#xff0c;无论数组总个数n为奇数还是偶数&#xff0c;都可以用下式表示 n u m s [ n / 2 ] 和 n u m s [ ( n − 1 ) / 2 ] nums[n/2] 和nums[(n-1)/2] nums[n/2]和nums[(n−1)/2] 当n 4时为nums[2]与nums[1] …

基于Docker的软件环境部署脚本,持续更新~

使用时CtrlF搜索你想要的环境&#xff0c;如果没有你想要的环境&#xff0c;可以评论留言&#xff0c;会尽力补充。 本文提供的部署脚本默认参数仅适合开发测试&#xff0c;请根据实际情况调节参数。 数据库 MySQL version: 3.9 services:mysql:image: mysql:8.0.35container…

Android 软键盘的显示和隐藏

文章目录 Android 软键盘的显示和隐藏核心方法软键盘工具类点击空白区域隐藏软键盘方式一方式二 Android 软键盘的显示和隐藏 核心方法 显示软键盘&#xff1a; InputMethodManager#showSoftInput(View view, int flags)隐藏软键盘&#xff1a; InputMethodManager#hideSof…

【Unity美术】Unity工程师对3D模型需要达到的了解【二】

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;Uni…

python使用句柄控制windows窗口

方法一&#xff1a;通过类名和标题搜索窗体并返回句柄&#xff0c;以整个windows窗口开始查找 hwnd win32gui.FindWindow(lpClassNameNone, lpWindowNameNone) hwnd win32gui.FindWindow(None,命令提示符) 方法二&#xff1a;从给定的子窗口之后开始&#xff0c;比如给定…

一元函数微分学——刷题(8

目录 1.题目&#xff1a;2.解题思路和步骤&#xff1a;3.总结&#xff1a;小结&#xff1a; 1.题目&#xff1a; 2.解题思路和步骤&#xff1a; 先看A&#xff0c;既然存在&#xff0c;那么f(x)和x属于同阶无穷小&#xff0c;所以f(0)0&#xff0c;没问题 再看C&#xff0c;结…

UntiyShader(七)Debug

目录 前言 一、利用假彩色图像 二、利用Visual Studio 三、帧调试器 前言 Debug&#xff08;调试&#xff09;&#xff0c;是程序员检查问题的一种方法&#xff0c;对于一个Shader调试更是一种噩梦&#xff0c;这也是Shader难写的原因之一——如果效果不对&#xff0c;我们…

Linux用户登出或者终端关闭后继续运行的方法

nohup 是一个 POSIX 命令&#xff0c;它的名称来源于“no hang up”的缩写。这个命令的基本用途是运行一个命令&#xff0c;使得该命令在用户登出或者终端关闭后继续运行。nohup 命令通常与后台运行的命令&#xff08;使用 & 符号&#xff09;结合使用&#xff0c;以便在终…

ubuntu22.04安装anacoda遇到的坑

这几天把用了3年的windows10换成了ubuntu22.04 各种环境都得配置&#xff0c;本文记录下遇到的坑。 1、anacoda在ubuntu上也可以用官方也提供了安装包&#xff0c;但是没有图形界面&#xff0c;需要以命令行的方式安装和运行配置 1.1 安装&#xff1a;官网下载后&#xff0c;…