路由嵌套是什么?怎么进行路由嵌套

路由嵌套:

此时我们从一个组件切换到另一个组件时,会直接跳转页面,所以我们需要一个东西让组件们可以在一个页面显示,这时候就需要进行路由嵌套。我们要找到组件之间的关系,大组件嵌套小组件,从大组件中打开某个小组件便可以直接在此页面显示。

首先需要在router中配置组件:

1.导入其他组件:

import ViewMain from '@/ViewMain.vue'; 
import MajorList from '@/views/major/MajorList.vue';
import StudentList from '@/views/student/StudentList.vue';
Vue.use(router)

2.定义组件路由:

先在routes里定义父组件然后在children里放子部件

var rout = new router({
	routes: [
		{
			path: '/viewmain',	//访问组件的地址
			name: 'viewmain',
			component: ViewMain,	//路由嵌套在viewmain下面的嵌套子路由
			children: [
			  { path: '/studentlist', component: StudentList },
			  { path: '/majorlist', component: MajorList }
			]
		},
	]
});

3.跳转部件的操作:

例如点击专业管理进入到专业部件,点击学生管理进入到学生部件

这里的index连接的是定义的部件里path位置

<el-menu-item index="/majorlist">专业管理</el-menu-item>
<el-menu-item index="/studentlist">学生管理</el-menu-item>

然后就完成路由嵌套了。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

如何借模板助力小程序开发

不论是奶茶店还是其他行业&#xff0c;想要开发小程序&#xff0c;乔拓云都为你提供了便捷的方案。无需复杂的编程技术&#xff0c;通过套用模板的方式&#xff0c;即可快速打造专属小程序。 在线访问乔拓云官方网站&#xff0c;免费注册账号后&#xff0c;即可进入商城小程序的…

C语言学习/复习36

一、程序的环境与预处理 二、翻译环境与执行环境 三、运行环境 四、预编译(预处理)详解

Docker从无到有

主要为windows下docker的安装与使用~ 初始Docker Docker理解 对于docker的加简介&#xff0c;我们可以官网获取它的概念&#xff0c;接下来就从什么是docker、为什么要使用docker以及它的作用来进行一个快速入门 前提&#xff1a;项目在发布时&#xff0c;不仅需要其jar包同…

Open-Sora 升级技术报告解读

最新功能概览 开源地址&#xff1a;https://github.com/hpcaitech/Open-Sora 技术报告&#xff1a;Open-Sora/docs/report_02.md at main hpcaitech/Open-Sora GitHub技术报告&#xff1a; 支持长视频生成&#xff1b;视频生成分辨率最高可达 720p&#xff1b;单模型支持任…

SOL跟单机器人是什么?

SOL跟单机器人是什么&#xff1f; 顾名思义&#xff0c;就是对方买什么我们买什么。。 solana跟单机器人&#xff0c;炒土狗新思路 跟聪明地址买入及卖出 1.跟随目标地址买入代币&#xff0c;比目标地址慢1-2秒内上链 2.上链稳定&#xff0c;采用jito路径&#xff0c;防止被夹 …

【视频打架行为数据集】打斗场景视频数据集简要介绍

一、UBI-Fight&#xff08;异常事件检测数据集&#xff09; 介绍 UBI-Fights 数据集是一个独特的全新大型数据集&#xff0c;涉及特定的异常检测并仍然在打斗场景中提供广泛的多样性&#xff0c;该数据集包含 80 小时的视频&#xff0c;在帧级别进行了完全注释。由 1000 个视…

三款数据可视化工具深度解析:Tableau、ECharts与山海鲸可视化

在数字化时代&#xff0c;数据可视化工具成为了企业和个人进行数据分析和决策的重要助手。市面上众多数据可视化工具各具特色&#xff0c;本文将为您介绍三款热门的数据可视化工具&#xff0c;帮助您更好地理解和利用数据。 首先&#xff0c;让我们来认识Tableau。Tableau是一款…

opencv4.8 系列一环境搭搭建

open 运行环境&#xff1a; vs2017 下载地址&#xff1a;https://www.123pan.com/s/cVyRVv-ydPWh.html 一&#xff1a;新建项目 二&#xff1a;核心代码&#xff1a; 在这里插入代码片 #include<opencv2/opencv.hpp>int main(int argc,char** argv) {cv::Mat src cv…

windows服务启动提示‘服务没有响应控制功能’(mysql启动报错)

在安装mysql的时候&#xff0c;在windows服务项启动 或 使用命令net start mysql 时启动是报错&#xff0c;提示 服务没有响应控制功能 发生原因&#xff1a; Windows10 x64 或 更高的操作系统&#xff0c;有些系统缺少一些组件 解决办法&#xff1a; 1、下载最新的 Microsoft …

Mybatis入门-----(1)

Mybaits入门 一、Mybaits框架特点 支持定制化SQL、存储过程、基本路线以及高级映射避免了几乎所有JDBC代码中手动设置参数以及获取结果集支持注解式开发、XML开发 二、开发我第一个MYbatis程序 ①打包方式jar ②引入依赖 mybatis依赖mysql驱动 前面两步的pom.xml文件<?…

如何在自己的网站页面中嵌入一个【悬浮音乐播放器】

如何嵌入【悬浮音乐播放器】 前言正文1.打开网易云网页版2.设置自己想要的高度和宽度看注意事项 3.选择是否为自动播放4.在header.php文件中</head>标签前插入下面代码5.在heard.php 中<body>标签后边增加一个 div层6.复制播放器代码到\<div>标签的里边7.保存…

AD修改元器件的引脚长度

这个地方的两个引脚长度不一样 双击其中的一个引脚。 修改这个位置就好了。

Docker学习(二十五)构建 Arthas 基础镜像

目录 一、简介二、构建基础镜像2.1 下载 Arthas2.2 编写 Dockerfile2.3 构建镜像2.4 创建容器2.5 测试 一、简介 Arthas 是一款由 阿里巴巴 开发的 线上监控诊断工具。通过全局视角实时查看应用负载、内存、GC、线程等信息&#xff0c;能在不修改代码的情况下&#xff0c;对业…

SUPIR图像放大模型介绍与实际测试

✨背景 正如&#xff0c;最顶级的料理只需要最简单的烹饪方法一样&#xff0c;图像放大&#xff0c;是设计领域里边最常面对的一个问题&#xff0c;在AI绘画里边也是很常见的一个课题。虽然现在放大算法、放大模型有很多&#xff0c;但是真的能实现的比较好的&#xff0c;并不…

语义分割——json文件转shp

前言 在用labelme标注遥感图像后会生成json文件&#xff0c;如果我们想要shp文件&#xff0c;下面给出了具体实现流程。 一、依赖配置 import json import geopandas as gpd from shapely.geometry import Polygon from osgeo import gdal import argparse import glob import…

【论文解析】笔触渲染生成 前沿工作梳理

最近的一些工作梳理 2023年 Stroke-based Neural Painting and Stylization with Dynamically Predicted Painting Region 2022年Im2Oil: Stroke-Based Oil Painting Rendering with Linearly Controllable Fineness Via Adaptive Sampling 文章目录 1 Stroke-based Neural P…

【海博】雅思该怎么考?

文章目录 考试类型 考试内容 考试形式 备考资源 考试报名 考试成绩 考试类型 学术类&#xff08;A类&#xff09;适用于&#xff1a;出国留学申请本科&#xff0c;研究生及以上学位&#xff0c;或获得专业资质。学术类考试评估考生的英语水平是否满足进行大学或研究生学习…

【C语言】文件操作(1)

为什么使⽤⽂件&#xff1f; 如果没有⽂件&#xff0c;我们写的程序的数据是存储在电脑的内存中&#xff0c;如果程序退出&#xff0c;内存回收&#xff0c;数据就丢失了&#xff0c;等再次运⾏程序&#xff0c;是看不到上次程序的数据的&#xff0c;如果要将数据进⾏持久化的…

Sylar C++高性能服务器学习记录07 【协程模块-知识储备篇】

早在19年5月就在某站上看到sylar的视频了&#xff0c;一直认为这是一个非常不错的视频&#xff0c;由于本人一直是自学编程&#xff0c;基础不扎实&#xff0c;也没有任何人的督促&#xff0c;没能坚持下去&#xff0c;每每想起倍感惋惜。恰逢互联网寒冬&#xff0c;在家无事&a…

vim 插件01:插件管理神器pathogen

1、pathogen简介 Vim 插件 pathogen 是一款历史比较悠久的 Vim 插件管理器。Pathogen 的主要功能是提供一种模块化的方式来管理和加载 Vim 插件。说人话&#xff1a;vim是一款管理各类插件的插卡&#xff0c;使用它会让插件的安装和使用非常方便。 以下是 Pathogen 的主要特点…