vue-router4 (六) 路由嵌套

应用场景:

①比如京东页面的首页、购物车、我的按钮,可以点击切换到对应的页面;

② 比如 Ant Design左侧这些按钮点击就会切到对应的页面,此时可以把左侧按钮放在父路由中,右侧的子路由

1.路由配置,子路由存放在children中,children中还能再嵌套children
const routes:Array<RouteRecordRaw> = [{path:"/user",   //路径name:"Footer",    //路由名称component:()=>import("../components/footer.vue"), //组件名,此处懒加载方式//子路由存放在children中children:[{path:"/user",   //子路由路径name:"Login",    //子路由名称component:()=>import("../components/login.vue")},{path:"/user/reg",  name:"Reg",component:()=>import("../components/reg.vue")}]}
]

2.父级路由组件中使用 <router-view ></router-view>(根据url不同,展示不同内容给用户)
<template><router-view ></router-view><br>我是父路由<div><router-link to="/user" style="margin-right: 20px;">login</router-link><router-link to="/user/reg">reg</router-link></div>
</template>

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

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

相关文章

蓝桥杯算法题汇总

一.线性表&#xff1a;链式 例题&#xff1a;旋转链表 二.栈&#xff1a; 例题&#xff1a;行星碰撞问题 三.队列 三.数组和矩阵 例题&#xff1a;

Docsify部署IIS

什么是Docsify&#xff1f; 一个神奇的文档网站生成器。docsify 可以快速帮你生成文档网站。不同于 GitBook、Hexo 的地方是它不会生成静态的 .html 文件&#xff0c;所有转换工作都是在运行时。如果你想要开始使用它&#xff0c;只需要创建一个 index.html 就可以开始编写文档…

MYSQL--锁机制*

一.对锁机制的大概介绍: 1.大概的来说,MYSQL当中的锁实际上就是合理的管理多个服务器对于同一个共享资源的使用,是计算机协调多个进程或者是线程并发访问某一资源的机制(避免争抢资源的现象发生) 2.在数据库当中,数据是一种可以供许多的用户进行共享使用的资源,如何保证数据并发…

Python环境搭建:一站式指南

在当前AIGC技术蓬勃发展的背景下&#xff0c;Python作为人工智能领域最受青睐的编程语言之一&#xff0c;成为我们必须掌握的技能。因此&#xff0c;搭建一个适合自己的Python环境成为了每个Python开发者的首要任务。本文将为您提供一站式的Python环境搭建指南&#xff0c;帮助…

WSL2部署RV1126 SDK编译环境

1 下载RV1126 SDK 在 Firefly | 让科技更简单&#xff0c;让生活更智能 下载REPO_SDK 这里将SDK下载到了F:\SDK 2 解压SDK到WSL2 tar -xvf /mnt/f/SDK/rv1126_rv1109_linux_release_20211022.tgz 3 编译依赖安装 gcc、g版本依赖安装 sudo apt-get install lib32gcc-7-dev g-7 l…

内容检索(2024.03.01)

随着创作数量的增加&#xff0c;博客文章所涉及的内容越来越庞杂&#xff0c;为了更为方便地阅读&#xff0c;后续更新发布的文章将陆续在此汇总并附上原文链接&#xff0c;感兴趣的小伙伴们可持续关注文章发布动态&#xff01; 本期更新内容&#xff1a; 1. 电磁兼容理论与实…

【王道数据结构】【chapter8排序】【P371t5】

编写一个算法&#xff0c;在基于单链表表示的待排序关键字序列上进行简单选择排序 #include <iostream> #include <time.h> #include <stdlib.h> typedef struct node{int data;struct node *next; }node,*pnode;pnode buynode(int x) {pnode tmp(pnode) mal…

加密与安全_探索口令加密算法(PBE)

文章目录 概述疑问PBE 算法 &#xff08; Password Based Encryption&#xff09;CodePOM实现 小结 概述 加密与安全_探索对称加密算法中我们提到AES加密密钥长度是固定的128/192/256位&#xff0c;而不是我们用WinZip/WinRAR那样&#xff0c;随便输入几位都可以。 这是因为对…

Spring底层源码分析

spring依赖注入底层原理解析 spring之bean对象生命周期步骤详情 流程&#xff1a; UserService.class —>推断构造方法—>普通对象----依赖注入------>初始化&#xff08;afterPropertiesSet方法&#xff09;------>初始化后&#xff08;AOP&#xff09;------…

软考-计算题

1.二维矩阵转换成一维矩阵 2.算术表达式&#xff1a; 3.计算完成项目的最少时间&#xff1a;之前和的max&#xff08;必须之前的所有环节都完成&#xff09; 松弛时间&#xff1a;最晚开始时间-最早开始时间 最早&#xff1a;之前环节都完成的和的max 最晚&#xff1a;总时间…

word文档空格不能有下划线【笔记】

word文档空格不能有下划线 2024-3-1 21:20:24 推荐 word下划线打不出来了&#xff0c;是怎么回事&#xff1f; 问题 字后面打不出来下划线 操作 1.点击文件 左上角&#xff0c;点击“文件”。 2.点击选项 鼠标下滑&#xff0c;点击“选项”。 3.点击常规与保存 点击“…

吸引用户购买产品的文案技巧,媒介盒子揭秘

在营销过程中&#xff0c;想要吸引用户购买产品&#xff0c;文案是重中之重&#xff0c;需要一定的技巧才能将文案写好&#xff0c;今天媒介盒子就来和大家聊聊&#xff1a;在品牌推广中如何通过一些小技巧吸引用户购买产品&#xff1a; 一、 少说专业术语 少说行话、黑话。多…