如何实现嵌套路由

实现步骤

1. 新建子页面

2. 在router/index.js中的父路由节点添加children数组

3. 在children中添加子路由

{path: '/',name: 'home',component: HomeView,children: [
{path: '/pageA',name: 'pageA',component: pageA},{path: '/pageB',name: 'pageB',component: pageB}]
},

5.在父路由页面添加 路由出口

<template><div><RouterLink to="/pageA">A页面</RouterLink>|<RouterLink to="/pageB">B页面</RouterLink><div style="border: 1px #000 solid;">子页面将输出到这里:<RouterView /></div></div>
</template>

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

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

相关文章

Web安全:SQL注入之布尔盲注原理+步骤+实战操作

「作者简介」&#xff1a;2022年北京冬奥会网络安全中国代表队&#xff0c;CSDN Top100&#xff0c;就职奇安信多年&#xff0c;以实战工作为基础对安全知识体系进行总结与归纳&#xff0c;著作适用于快速入门的 《网络安全自学教程》&#xff0c;内容涵盖系统安全、信息收集等…

前端VUE基础之创建脚手架

创建脚手架 第一步&#xff08;仅第一次执行&#xff09;&#xff1a;全局安装vue/cli。 npm install -g vue/cli 到你要创建项目的目录&#xff0c;然后使用命令创建项目 vue create xxxx 第三步&#xff1a;启动项目 npm run serv 备注&#xff1a; 1. 如出现下载缓慢请…

PHP流程控制

PHP 流程控制主要是 if 和 switch 流程控制。 当您编写代码时&#xff0c;您常常需要为不同的判断执行不同的动作。您可以在代码中使用条件语句来完成此任务。 在 PHP 中&#xff0c;提供了下列条件语句&#xff1a; if 语句 - 在条件成立时执行代码if...else 语句 - 在条件…

访客管理系统对于校园安全的重要性

校园访客办理计划是针对校园安全需求规划的安全办理体系&#xff0c;主要用于对校园外来人员的科学办理。要做好校园安全作业&#xff0c;把风险分子拒之门外尤为要害。校园访客办理计划实现访客实名制&#xff0c;并结合公安网、黑名单功用&#xff0c;对风险人员进行提前预警…

没有公网ip,如何实现外网访问内网?

目前拨号上网是最广泛的上网方式&#xff0c;这种方式优点是价格便宜&#xff0c;缺点是没有固定公网ip&#xff0c;每次重新您拨号ip地址都会变。如果有一台服务器&#xff0c;需要实现外网访问&#xff0c;在没有固定公网ip的环境下&#xff0c;该如何实现呢&#xff1f;使用…

【CTF Web】QSNCTF 文章管理系统 Writeup(SQL注入+Linux命令+RCE)

文章管理系统 题目描述 这是我们的文章管理系统&#xff0c;快来看看有什么漏洞可以拿到FLAG吧&#xff1f;注意&#xff1a;可能有个假FLAG哦 解法 SQL 注入。 ?id1 or 11 --取得假 flag。 爆库名。 ?id1 union select 1,group_concat(schema_name) from information_sch…

华为OD机试【统一限载货物数最小值】(java)(200分)

1、题目描述 火车站附近的货物中转站负责将到站货物运往仓库&#xff0c;小明在中转站负责调度 2K 辆中转车(K辆干货中转车&#xff0c;K 辆湿货中转车)货物由不同供货商从各地发来&#xff0c;各地的货物是依次进站&#xff0c;然后小明按照卸货顺序依次装货到中转车&#xf…

二维数组 和 变长数组

在上一期的内容中&#xff0c;为诸君讲解到了一维数组&#xff0c;在一维数组的基础上&#xff0c;C语言中还有着多维数组&#xff0c;其中&#xff0c;比较典型且运用较为广泛的就是我们今天的主角——二维数组 一 . 二维数组的概念 我们把单个或者多个元素组成的数组定义为一…

VScode 修改 Markdown Preview Enhanced 主题与字体

VScode 修改 Markdown Preview Enhanced 主题与字体 1. 修改前后效果对比2. 修改主题2.1 更改默认主题2.2 修改背景色 3. 修改字体 VS Code基础入门使用可查看&#xff1a; VS Code 基础入门使用&#xff08;配置&#xff09;教程 其他Vs Code 配置可关注查看&#xff1a; Vs C…

2024年如何选什么版本FL Studio才适合自己编曲?

fl studio是什么软件 水果编曲软件 FL Studio&#xff0c;全称为Fruity Loops Studio&#xff0c;是一款全能音乐制作环境或数字音频工作站&#xff08;DAW&#xff09;&#xff0c;集编曲、录音、剪辑、混音等多种功能于一身。 FL Studio最初名为Fruity Loops&#xff0c;因…

外网如何访问内网?快解析

由于公网IP资源短缺&#xff0c;我们的电脑大多处于内网环境&#xff0c;如何在外网访问内网电脑&#xff0c;成为一个令人头疼的问题&#xff0c;下面我给大家推荐一个非常实用的方法。 1&#xff1a;访问快解析下载安装快解析服务器 2&#xff1a;运行软件&#xff0c;点击“…

2.4 输入和显示

本节必须掌握的知识点&#xff1a; 示例五源代码 代码分析 汇编解析 2.4.1 示例五 ■格式化输入函数scanf scanf函数可以从键盘读取输入的信息。scanf函数同样可以像printf函数那样&#xff0c;通过转换说明“%d”来限制函数只能读取十进制数。scanf函数的参数为可变参数…

【算法训练 day25 修剪二叉搜索树、将有序数组转化为二叉搜索树、把二叉树搜索转化为累加树】

目录 一、修剪二叉搜索树-LeetCode 669思路实现代码个人代码视频链接代码 个人问题 二、将有序数组转化为二叉搜索树-LeetCode 108思路实现代码个人问题 三.把二叉树搜索转化为累加树-LeeCode 538思路实现代码个人问题 一、修剪二叉搜索树-LeetCode 669 Leecode链接: leetcode…

项目管理-计算题公式【复习】2/2

2.【成本】相关公式 2.1挣值分析 三个参数 &#xff08;1&#xff09;计划价值(PV&#xff0c;Plan Value): PV&#xff1a;计划工作分配的经批准的预算&#xff0c;是为完成某活动或 WBS 组成部分而准备的一份经批准的预算。不包括管理储备。 注意&#xff1a;按照计划截止目…

LwIP 之九 详解 UDP RAW 编程、示例、API 源码、数据流

我们最为熟知的网络通信程序接口应该是 Socket。LwIP 自然也提供了 Socket 编程接口,不过,LwIP 的 Socket 编程接口都是使用最底层的接口来实现的。我们这里要学习的 UDP RAW 编程则是指的直接使用 LwIP 的最底层 UDP 接口来直接实现应用层功能。这里先来一张图,对 LwIP 内部…

React 和 Vue两个流行的前端 JavaScript 框架有什么区别?

设计理念&#xff1a; React 是由 Facebook 开发的&#xff0c;专注于构建 UI 组件。它采用了一种声明式的、组件化的开发模式&#xff0c;通过使用虚拟 DOM 来实现高效的 UI 更新。 Vue 是由尤雨溪开发的&#xff0c;旨在提供一个灵活且易于上手的框架。Vue 也支持组件化开发…

电商技术揭秘营销相关系列文章合集(4)

相关系列文章 电商技术揭秘相关系列文章合集&#xff08;1&#xff09; 电商技术揭秘相关系列文章合集&#xff08;2&#xff09; 电商技术揭秘相关系列文章合集&#xff08;3&#xff09; 文章目录 引言集合说明集合文章列表 引言 在数字化浪潮的推动下&#xff0c;电商行…

【35分钟掌握金融风控策略25】定额策略实战2

目录 基于收入和负债的定额策略 确定托底额度和盖帽额度 确定基础额度 基于客户风险评级确定风险系数 计算最终授信额度 确定授信有效期 基于收入和负债的定额策略 在实际生产中&#xff0c;客户的收入和负债数据大多无法直接获得&#xff0c;对于个人的收入和负债数据&…

【JavaEE】Spring Boot 入门:快速构建你的第一个 Spring Boot 应用

目录 第一个SpringBoot程序介绍项目创建创建项目目录介绍输出Hello World 第一个SpringBoot程序 介绍 在学习SpringBoot之前, 我们先来认识⼀下Spring 我们看下Spring官⽅(https://spring.io/)的介绍 可以看到, Spring让Java程序更加快速, 简单和安全. Spring对于速度、简单…

【论文阅读笔记】MapReduce: Simplified Data Processing on Large Clusters

文章目录 1 概念2 编程模型3 实现3.1 MapReduce执行流程3.2 master数据结构3.3 容错机制3.3.1 worker故障3.3.2 master故障3.3.3 出现故障时的语义 3.4 存储位置3.5 任务粒度3.6 备用任务 4 扩展技巧4.1 分区函数4.2 顺序保证4.3 Combiner函数4.4 输入和输出的类型4.5 副作用4.…