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

server/2024/12/23 19:21:44/

路由嵌套:

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

首先需要在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.ppmy.cn/server/19682.html

相关文章

Java设计模式 _创建型模式_建造者模式(Builder)

一、建造者模式 1、建造者模式&#xff08;Builder Pattern&#xff09;是一种创建对象的设计模式。它允许你使用不同的构建策略来创建复杂对象。通常是在复杂类中通过静态内部类&#xff08;Builder&#xff09;来进行构建。 2、实现思路&#xff1a; &#xff08;1&#xf…

Java 线程的几种状态

一、 线程的状态 状态是针对当前的线程调度的情况来描述的。因为线程是调度的基本单位&#xff0c;所以状态更应该是线程的属性。在Java中线程的状态一共有六种&#xff1a; 1. 初始(NEW)&#xff1a;新创建了一个线程对象&#xff0c;但还没有调用start()方法。 2. 运行(RUNN…

探索和构建 LLaMA 3 架构:深入探讨组件、编码和推理技术(八)Transformer块

探索和构建 LLaMA 3 架构&#xff1a;深入探讨组件、编码和推理技术&#xff08;八&#xff09;编码器块 Transformer块 由于 只关注模型的推理&#xff0c;因此 只会研究transformer块 class EncoderBlock(nn.Module):def __init__(self, args: ModelArgs):super().__init__…

【保姆级教程】Windows 远程登录 Ubuntu桌面环境

前言 在Windows下远程访问Linux服务器的桌面&#xff0c;有几种常见的方法&#xff1a; xrdp&#xff08;X Remote Desktop Protocol&#xff09;&#xff1a;xrdp允许Windows使用RDP&#xff08;Remote Desktop Protocol&#xff09;来连接到Linux服务器的桌面。这种方式相对…

SQL基础(关系模型)

目录 SQL及定义域概念 SQL是什么 定义域 关系简介 关系的定义 关系的封闭性 关系模型简介 关系模型 谓词逻辑 运算基础 SQL的加减乘除 SQL的除法1 SQL的除法2 SQL的除法3 三值逻辑 NULL的危害 消除NULL SQL及定义域概念 SQL是什么 Structured Query Languag…

pnpm的安装与配置(Windows/macOS)

&#x1f4e6; PNPM的安装与配置&#xff08;Windows与macOS&#xff09; &#x1fa9f; Windows系统下安装与配置PNPM 步骤一&#xff1a;安装Node.js 首先&#xff0c;访问 Node.js官方网站 获取适用于Windows操作系统的最新稳定版安装程序。在安装过程中&#xff0c;请确…

css中新型的边框设置属性border-block

border-block 是 CSS 中的一个属性&#xff0c;主要用于在样式表中一次性设置元素的逻辑块向边框的属性值。这个属性是简写属性&#xff0c;可以同时设置 border-block-width、border-block-style 和 border-block-color。其中&#xff0c;border-block-start 用于设置元素的开…

免费ChatGPT合集——亲测免费

1、YesChat 无需登录 网址&#xff1a;YesChat-ChatGPT4V Dalle3 Claude 3 All in One Freehttps://www.yeschat.ai/ 2. 讯飞星火 要登录 讯飞星火大模型-AI大语言模型-星火大模型-科大讯飞 3.通义千问 要登录 通义我是通义&#xff0c;一个专门响应人类指令的…