前端框架Vue学习 ——(七)Vue路由(Vue Router)

文章目录

  • 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 中加入路由展示组件

在这里插入图片描述

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

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

相关文章

k8spod详解其二

一&#xff0c;资源限制 当定义 Pod 时可以选择性地为每个容器设定所需要的资源数量。 最常见的可设定资源是 CPU 和内存大小&#xff0c;以及其他类型的资源。 当为 Pod 中的容器指定了 request 资源时&#xff0c;调度器就使用该信息来决定将 Pod 调度到哪个节点上。当还为…

软件开发必备神器!一文读懂10款热门看板工具推荐!

看板&#xff08;Kanban&#xff09;是一种流行的框架&#xff0c;用于实施敏捷和DevOps软件开发。它要求实时沟通每个人的能力&#xff0c;并全面透明地展示正在进行的工作。工作项目在看板上以可视化方式表示&#xff0c;使项目经理和所有团队成员可以随时查看每个工作的状态…

比特币全节点同步加速记录(使用Bitcoin Core钱包)

1. 预先下载或从别的地方拷贝区块数据而不是直接在Bitcoin Core钱包中下载 这方面可以参考 截止到2022年8月的区块数据 2. 将区块头数据和区块实体数据分开存储 区块头数据放到SSD中&#xff0c;区块实体数据放到HDD中 这方面可以参考 BitcoinCore节点同步加速原理和方法实验…

“网站不安全”该如何解决

当我们的网站被客户访问的时候&#xff0c;经常会出现提示不安全的情况&#xff0c;导致客户的不信任&#xff0c;从而出现客户流失的现象&#xff0c;这种情况我们应该如何解决呢&#xff1f; 首先&#xff0c;我们要确定网站会出现不安全的原因&#xff0c;一般来说&#xff…

vue项目中订单完成提交按钮动画

1. 动画1 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><title>Order</title><!-- <link rel"stylesheet" href"https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/re…

P2910 [USACO08OPEN] Clear And Present Danger S

Portal. 最短路。 考虑到数据范围 N ≤ 100 N\leq 100 N≤100&#xff0c;可以用 Floyd 算法解决。 对于要求的行走序列&#xff0c;按顺序累加答案即可。 注意数组大小。 #include <bits/stdc.h> using namespace std; #define int long longint A[10005],f[105][…

【数据结构】单向链表的增删查改以及指定pos位置的插入删除

目录 单向链表的概念及结构 尾插 头插 尾删 ​编辑 头删 查找 在pos位置前插 在pos位置后插 删除pos位置 删除pos的后一个位置 总结 代码 单向链表的概念及结构 概念&#xff1a;链表是一种 物理存储结构上非连续 、非顺序的存储结构&#xff0c;数据元素的 逻辑顺序 是…

收藏丨20个医疗场景经典、热门数据集资源汇总

当今&#xff0c;人工智能技术在医疗领域的应用日益广泛&#xff0c;其中医疗数据集起到了至关重要的作用。本文将介绍 20 个经典的医疗开源数据集&#xff0c;涵盖了各个部位、CT\MRI\内窥镜等多种模态数据&#xff0c;以帮助研究者们更好地探索和研发医疗AI大模型。 同时&am…

uniapp小程序使用web-view组件页面分享后,点击没有home小房子解决办法

uniapp小程序使用web-view组件页面分享后&#xff0c;点击没有home小房子解决办法 小程序 &#xff1a;IOS 测试正常&#xff0c; 安卓 不显示home 微信小程序使用的是全局自定义导航&#xff0c;通过首页 banner 跳转到一个 web-view 页面&#xff0c;展示官网。 web-view 页…

[vmware]vmware虚拟机压缩空间清理空间

vmware中的ubuntu使用如果拷贝文件进去在删除&#xff0c;vmare镜像文件并不会减少日积月累会不断是的真实物理磁盘空间大幅度减少&#xff0c;比如我以前windows操作系统本来只有30GB最后居然占道硬盘200GB&#xff0c;清理方法有2种。 第一种&#xff1a;vmware界面操作 第二…

德国爆发大规模勒索软件攻击,超70个城市市政服务瘫痪

根据11月3日消息称&#xff0c;德国西部本周发生大规模勒索软件攻击&#xff0c;多个城市和地区的地方政府服务陷入瘫痪。 上周一&#xff08;10月30日&#xff09;早上&#xff0c;德国地方市政服务提供商Sdwestfalen IT公司的服务器被未知的黑客团伙加密。为阻止恶意软件传播…

掌握视频封面提取与剪辑技巧,提升视频品质

在当今的数字媒体时代&#xff0c;视频已成为人们获取信息、娱乐、社交等多种需求的重要方式。一个高质量的视频封面和剪辑技巧可以大大提高视频的吸引力和品质&#xff0c;因此&#xff0c;掌握视频封面提取与剪辑技巧对于视频制作者来说至关重要。那么现在一起来看看云炫AI智…

【STL】:list的模拟实现

朋友们、伙计们&#xff0c;我们又见面了&#xff0c;本期来给大家解读一下有关list的模拟实现&#xff0c;如果看完之后对你有一定的启发&#xff0c;那么请留下你的三连&#xff0c;祝大家心想事成&#xff01; C 语 言 专 栏&#xff1a;C语言&#xff1a;从入门到精通 数据…

sql逻辑优化

1.分页 通常使用每页条数及第一页作为参数 开发接口 GetMapping("/querySystemList") public List<SystemAduit> querySystemList(RequestParam("keyword") String keyword,RequestParam(name "offset", defaultValue "0") i…

Activiti监听器

文章目录 学习链接任务监听器 TaskListener监听的事件TaskListener 接口监听器委托类DelegateTask 任务监听实现方式 — 类class绘制流程图自定义任务监听器SiteReportUserTaskListener 测试 监听实现方式 — 表达式expression绘制流程图自定义 TaskListenerExpression测试spri…

【入门Flink】- 02Flink经典案例-WordCount

WordCount 需求&#xff1a;统计一段文字中&#xff0c;每个单词出现的频次 添加依赖 <properties><flink.version>1.17.0</flink.version></properties><dependencies><dependency><groupId>org.apache.flink</groupId><…

基于前馈神经网络完成鸢尾花分类

目录 1 小批量梯度下降法 1.0 展开聊一聊~ 1.1 数据分组 1.2 用DataLoader进行封装 1.3 模型构建 1.4 完善Runner类 1.5 模型训练 1.6 模型评价 1.7 模型预测 思考 总结 参考文献 首先基础知识铺垫~ 继续使用第三章中的鸢尾花分类任务&#xff0c;将Softm…

uinapp微信小程序隐私政策授权

&#x1f680; 隐私弹窗效果图&#xff1a; 1、启用隐私相关功能在manifest.json文件中配置 usePrivacyCheck: true "mp-weixin" : {"__usePrivacyCheck__" : true, },2、创建组件 <template><view><!-- 隐私政策弹窗 --><uni-popu…

在RabbitMQ中 WorkQueue 工作队列 和发布(publish)/订阅(Subscribe) 有什么区别?

在RabbitMQ中&#xff0c;"Work Queue"&#xff08;工作队列&#xff09;和"Publish/Subscribe"&#xff08;发布/订阅&#xff09;是两种不同的消息传递模型&#xff0c;它们有不同的用途和工作方式。 Work Queue (工作队列)&#xff1a; 用途&#xff1a…

SpringBoot基础(五)-- 引导类

引言: SpringBoot确实帮助我们减少了很多配置工作,下面说一下程序是如何运行的。目前程序运行的入口就是SpringBoot工程创建时自带的那个类了,带有main方法的那个类,运行这个类就可以启动SpringBoot工程的运行。 @SpringBootApplication public class SpringBootQu…