当前位置： 首页 > news >正文

前端框架Vue学习 ——（七）Vue路由（Vue Router）

news 2026/2/7 15:29:10

文章目录

  • Vue路由使用场景
  • Vue Router 介绍
  • Vue Router 使用

Vue路由使用场景

使用场景：如下图，点击部门管理的时候显示部门管理的组件，员工管理的时候显示员工管理的组件。

在这里插入图片描述

前端路由：指的是 URL 中的 hash(#号)与组件之间的对应关系。

在这里插入图片描述

Vue Router 介绍

介绍：Vue Router 是 Vue 的官方路由
组成：

  • VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件
  • <router-link>：请求链接组件，浏览器会解析成 <a>
  • <router-view>：动态视图组件,用来渲染展示与路由路径对应的组件

在这里插入图片描述
在这里插入图片描述

Vue Router 使用

注意： 路由信息在 src/router/index.js 中配置

安装 Vue Router
在这里插入图片描述

要实现的效果

在这里插入图片描述

  1. 在 router/index.js 中配置路由信息

在这里插入图片描述

  1. 在相应的 views/tlias/DeptView.vue和EmpView.vue 中加路由链接组件

在这里插入图片描述

  1. 在 App.vue 中加入路由展示组件

在这里插入图片描述

相关文章：

前端框架Vue学习 ——（七）Vue路由（Vue Router）

文章目录 Vue路由使用场景Vue Router 介绍Vue Router 使用 Vue路由使用场景 使用场景&#xff1a;如下图&#xff0c;点击部门管理的时候显示部门管理的组件&#xff0c;员工管理的时候显示员工管理的组件。 前端路由&#xff1a;指的是 URL 中的 hash(#号)与组件之间的对应关…...

编程日记 2023/11/6 15:29:24

2023-2024-1高级语言程序设计-一维数组

7-1 逆序输出数组元素的值 从键盘输入n个整数存入一维数组中&#xff0c;然后将数组元素的值逆序输出。 输入格式: 第一行输入整数个数n&#xff1b; 第二行输入n 个整数&#xff0c;数据之间以空格隔开。 输出格式: 逆序输出数组元素的值&#xff0c;每个数据之后跟一个空…...

编程日记 2023/11/6 15:28:23

史上最全，从初级测试到高级测试开发面试题汇总，冲击大厂年50w+

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 接口测试面试相关…...

编程日记 2023/11/6 15:27:21

Python基础入门例程42-NP42 公式计算器（运算符）

最近的博文&#xff1a; Python基础入门例程41-NP41 二进制位运算&#xff08;运算符&#xff09;-CSDN博客 Python基础入门例程40-NP40 俱乐部的成员&#xff08;运算符&#xff09;-CSDN博客 Python基础入门例程39-NP39 字符串之间的比较&#xff08;运算符&#xff09;-C…...

编程日记 2023/11/6 15:26:20

C#的LINQ to XML 类中使用最多的三个类：XElement、XAttribute 和 XDocument

目录 一、XElement 类 1.使用 XElement 类创建一个 xml 文档 &#xff08;1&#xff09;示例源码 &#xff08;2&#xff09;xml文件 2.使用LINQ to SQL或者LINQ to Object获取数据源 &#xff08;1&#xff09;示例源码 &#xff08;2&#xff09;xml文件 3.XElement …...

编程日记 2023/11/6 15:24:18

2023软考-系统架构师一日游

上周六&#xff08;11月4号&#xff09;参见了软考&#xff0c;报的系统架构师&#xff0c;今年下半年是第一次推行机考&#xff0c;简单来分享下大致流程&#xff0c;至于考试难度、考点什么的&#xff0c;这个网上有很多专门研究这些的机构&#xff0c;本人无权发言。考试的经…...

编程日记 2023/11/6 15:23:17

维乐 Prevail Glide带你做破风王者，无阻前行！

对于自行车骑手来说&#xff0c;需要应对的问题有很多&#xff0c;其中最大的问题之一&#xff0c;就是「风阻」。风阻永远都是你越反抗越强&#xff0c;因此为了克服风阻的力量&#xff0c;时间久了&#xff0c;身体自然会造成一定程度的损伤。如何才能调整前行的步伐&#xf…...

编程日记 2023/11/6 15:21:16

企业通配符SSL证书的特点

企业通配符SSL证书是一种数字证书&#xff0c;其可以用于保护多个企业网站&#xff0c;对网站传输信息进行加密服务。这种证书通常适用于拥有多个子域名或二级域名的企事业单位。今天就随SSL盾小编了解企业通配符SSL证书的相关信息。 1. 保护所有域名和子域名&#xff1a;企业通…...

编程日记 2023/11/6 15:20:15

1.2 HTML5

一.HTML5 简介 1.什么是HTML5 HTML5是新一代的 HTML 标准&#xff0c;2014年10月由万维网联盟( W3C&#xff09;完成标准制定。官网地址: w3c提供:HTML StandardWHATWG提供: HTML Standard HTML5在狭义上是指新—代的 HTML 标准&#xff0c;在广义上是指:整个前端。 2.HTML…...

编程日记 2023/11/6 15:19:14

一个例子！教您彻底理解索引的最左匹配原则！

最左匹配原则的定义 简单来讲&#xff1a;在联合索引中&#xff0c;只有左边的字段被用到&#xff0c;右边的才能够被使用到。我们在建联合索引的时候&#xff0c;区分度最高的在最左边。 简单的例子 创建一个表 CREATE TABLE user ( id INT NOT NULL AUTO_INCREMENT, code…...

编程日记 2023/11/6 15:18:11

Docker容器技术实战4

11、docker安全 proc未被隔离&#xff0c;所以在容器内和宿主机上看到的东西是一样的 容器资源控制 cpu资源限制 top命令&#xff0c;查看cpu使用率 ctrlpq防止退出回收&#xff0c;容器会直接调用cgroup&#xff0c;自动创建容器id的目录 cpu优先级设定 测试时只保留一个cpu…...

编程日记 2023/11/6 15:17:10

vue3中使用better-scroll

文章目录 需求分析安装htmlcssjs 需求分析 假设现在有这么一个需求&#xff0c;页面顶部有几个tabs导航&#xff0c;每一个tab下都有一个可以滑动的切换按钮。咱们就可以引入better-scroll来实现这个需求。 安装 首先下载better-scroll npm install better-scroll/core --…...

编程日记 2023/11/6 15:16:09

RK3568禁用调试口改成普通口

RK3568共10个串口&#xff0c;需要用到8个串口&#xff0c;无耐其他UART都被外设复用了&#xff0c;只好将调试口也拿出来作为普通口&#xff0c;方法&#xff1a;禁用调试口、增加UART2 1. vi kernel/arch/arm64/boot/dts/rockchip/OK3568-C-linux.dts 2. #include &quo…...

编程日记 2023/11/6 15:15:08

腾讯云CVM服务器标准型S5、SA3、S6详细介绍

腾讯云CVM服务器标准型实例的各项性能参数平衡&#xff0c;标准型云服务器适用于大多数常规业务&#xff0c;例如&#xff1a;web网站及中间件等&#xff0c;常见的标准型云服务器有CVM标准型S5、S6、SA3、SR1、S5se等规格&#xff0c;腾讯云服务器网txyfwq.com来详细说下云服务…...

编程日记 2023/11/6 15:14:08

【PC电脑windows环境下-[jetson-orin-NX]Linux环境下-下载工具esptool工具使用-相关细节-简单样例-实际操作】

【PC电脑windows环境下-[jetson-orin-NX]Linux环境下-下载工具esptool工具使用-相关细节-简单样例-实际操作】 1、概述2、实验环境3、 物品说明4-2、自我总结5、本次实验说明1、准备样例2、设置芯片3、编译4、下载5、验证 &#xff08;1&#xff09;windows环境下进行烧写1、下…...

编程日记 2023/11/6 15:13:06

什么是flink

flink的起源 Flink的起源可以追溯到2010年&#xff0c;当时它作为一个研究项目开始。该项目最初由德国柏林工业大学&#xff08;Berlin Institute of Technology&#xff09;的一群研究人员发起&#xff0c;包括Matei Zaharia、Kostas Tzoumas和Stephan Ewen等。 项目最初被称为…...

编程日记 2023/11/6 15:12:05

基于 VTable 的多维数据展示的原理与实践

多维表格介绍 多维表格又名透视表、交叉表、Pivot Table&#xff0c;指的是可以在行维度和列维度放入一个或多个维度&#xff0c;显示维度之间相互关系的一种表格。用户可以一目了然地分析出各种场景指标以及对比&#xff0c;旨在帮助业务分析推动决策。 假设需要分析如下表格…...

编程日记 2023/11/6 15:11:05

为什么有了MAC地址，还需要IP地址？

解释 搞懂这个问题&#xff0c;首先需要了解交换机的功能 交换机内部有一张MAC地址映射表&#xff0c;记录着MAC地址和端口的对应关系。 如果A要给B发送一个数据包&#xff0c;构造如下格式的数据结构&#xff1a; 到达交换机时&#xff0c;交换机内部通过自己维护的 MAC 地…...

编程日记 2023/11/6 15:10:03

Eclipse开发环境的安装与配置

Eclipse开发环境的安装与配置 1.Eclipse安装与配置 1.将JDK与Eclipse这两个软件安装包放在一个文件夹下&#xff0c;方便之后安装使用。 2.安装JDK 在D&#xff1a;LeStoreDownload\java文件夹下另外新建三个文件夹分别命名为java、jdk和eclipse&#xff08;分别用于Java、j…...

编程日记 2023/11/6 15:09:00

《006.Springboot+vue之旅游信息推荐系统》【有文档】

《006.Springbootvue之旅游信息推荐系统》【有文档】 项目简介 [1]本系统涉及到的技术主要如下&#xff1a; 推荐环境配置&#xff1a;DEA jdk1.8 Maven MySQL 前后端分离; 后台&#xff1a;SpringBootMybatis; 前台&#xff1a;vueElementUI; [2]功能模块展示&#xff1a; …...

编程日记 2023/11/6 15:07:59

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

编程新知 2026/2/5 15:43:28

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

编程新知 2026/1/26 20:20:15

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介 对于社交类软件的功能&#xff0c;我们需要对它的功能特点进行分析&#xff1a; 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具&#xff1a; mysql&#xff1a;关系型数据库&am…...

编程新知 2026/1/23 10:24:30

从深圳崛起的“机器之眼”：赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

编程新知 2026/1/25 14:13:16

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

编程新知 2026/2/3 15:24:36

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

编程新知 2026/2/1 3:12:03

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控，故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

编程新知 2026/1/15 1:34:10

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

编程新知 2026/2/4 16:13:50

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

编程新知 2026/2/6 2:05:50

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

编程新知 2026/1/29 9:12:46