前端框架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.rhkb.cn/news/183431.html

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

相关文章

数据结构与算法之美学习笔记:16 | 二分查找(下):如何快速定位IP对应的省份地址?

目录 前言二分查找的变形问题变体一&#xff1a;查找第一个值等于给定值的元素变体二&#xff1a;查找最后一个值等于给定值的元素变体三&#xff1a;查找第一个大于等于给定值的元素变体四&#xff1a;查找最后一个小于等于给定值的元素 解答开篇内容小结 前言 本节课程思维导…

VR全景如何助力乡村振兴,乡村发展在哪些方面用到VR全景技术

引言&#xff1a; 乡村振兴是当今中国发展的重要战略&#xff0c;也是推动农村经济社会全面发展的关键举措。在这一过程中&#xff0c;虚拟现实&#xff08;VR&#xff09;全景技术正逐渐崭露头角&#xff0c;为乡村振兴提供了机遇。 一&#xff0e;VR全景技术的概念和应用 1…

gitlab 设置 分支只读

一&#xff0c;设置master分支只读&#xff0c; 并且只有Maintainers 拥有合并权限。 二&#xff0c;设置成员权限 改为developer 三&#xff0c;邀请成员 点击右上角 Invite Members

AC修炼计划(AtCoder Regular Contest 163)

传送门&#xff1a;AtCoder Regular Contest 163 - AtCoder 第一题我们只需要将字符串分成两段&#xff0c;如果存在前面一段比后面一段大就成立。 #include<bits/stdc.h> #define int long long using namespace std; typedef long long ll; typedef pair<int,int&g…

Flutter 第三方 flutter_screenutil(屏幕适配)

一直觉得自己写的不是技术&#xff0c;而是情怀&#xff0c;一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的&#xff0c;希望我的这条路能让你们少走弯路&#xff0c;希望我能帮你们抹去知识的蒙尘&#xff0c;希望我能帮你们理清知识的脉络&#xff0…

element 弹窗浏览器后退-遮照层还存在问题 以及跟vue keep-alive冲突

问题&#xff1a;element 弹窗浏览器后退-遮照层还存在问题 查询官网可以设置 modal-append-to-body“false” 可以全局设置 ElementUI.Dialog.props.modalAppendToBody.default false 后续 基本到这能解决问题&#xff0c;不过本项目比较特殊&#xff0c;使用了 keep-alive…

【数据结构】排序算法复杂度 及 稳定性分析 【图文详解】

排序算法总结 前言[ 一 ] 小数据基本排序算法&#xff08;1&#xff09;冒泡排序&#xff08;2&#xff09;直接插入排序 [ 二 ] &#xff08;由基本排序衍生的用作&#xff09;处理大数据处理排序&#xff08;1&#xff09;堆排序&#xff08;2&#xff09;希尔排序 [ 三 ] 大…

MapReduce性能优化之小文件问题和数据倾斜问题解决方案

文章目录 MapReduce性能优化小文件问题生成SequenceFileMapFile案例 &#xff1a;使用SequenceFile实现小文件的存储和计算 数据倾斜问题实际案例 MapReduce性能优化 针对MapReduce的案例我们并没有讲太多&#xff0c;主要是因为在实际工作中真正需要我们去写MapReduce代码的场…

12 款小众宝藏AI工具,90% 的开发者不了解

AI工具的发展一日千里&#xff0c;了解这些AI工具的功能以及它们如何提高开发过程中的效率和创新&#xff0c;变得尤为重要&#xff0c;这里分享了 12个宝藏的人工智能和低代码工具&#xff0c;希望对大家的工作与学习有所帮助。 1.Pieces for Developers 网址&#xff1a;ht…

【ElasticSearch系列-05】SpringBoot整合elasticSearch

ElasticSearch系列整体栏目 内容链接地址【一】ElasticSearch下载和安装https://zhenghuisheng.blog.csdn.net/article/details/129260827【二】ElasticSearch概念和基本操作https://blog.csdn.net/zhenghuishengq/article/details/134121631【三】ElasticSearch的高级查询Quer…

麒麟系统 UFW 操作文档

麒麟系统 UFW 操作文档 1. UFW 介绍 ufw&#xff08;简单防火墙 Uncomplicated FireWall&#xff09;真正地简化了 iptables&#xff0c;虽然 ufw 的底层依 然会调用 iptables&#xff0c;但是配置防火墙规则时操作更加方便&#xff0c;命令更加简洁&#xff0c;本文档主要介…

Android Studio(对话框AlertDialog)

前言 前面介绍了常用控件的相关属性&#xff0c;那些控件的使用起来也很容易。在本节及后面的章节介绍的控件将是相比于前面使用起来较为复杂的&#xff08;不过使用多了&#xff0c;也很容易上手&#xff09;。 这些控件常常需要配合java代码来使用&#xff0c;比如说对话框、…

三国志14信息查询小程序(历史武将信息一览)制作更新过程03-主要页面的设计

1&#xff0c;小程序的默认显示 分为三部分&#xff0c;头部的标题、中间的内容区和底部的标签栏。点击标签可以切换不同页面&#xff0c;这是在app.json文件中配置的。代码如下&#xff1a; //所有用到的页面都需要在 pages 数组中列出&#xff0c;否则小程序可能会出现错误或…

Red Giant Trapcode Suite 2024.0.1

Red Giant Trapcode Suite是一款ae视觉效果插件软件&#xff0c;适用于After Effects和Premiere Pro等流行的视频编辑软件。该软件集合了一系列强大而创新的工具&#xff0c;可以帮助用户创建令人惊叹的视觉效果和动态图形。 Red Giant Trapcode Suite包含多种插件&#xff0c…

GPT-4V:AI在医疗领域的应用

OpenAI最新发布的GPT-4V模型为ChatGPT增添了语音和图像功能&#xff0c;为用户提供了更多在日常生活中使用ChatGPT的方式。这次更新将为用户带来更加便捷、直观的交互体验&#xff0c;用户可以直接通过拍照上传图片&#xff0c;并提出相关问题。OpenAI的最终目标是构建一个安全…

安卓系统手机便签app使用哪一款?

在现代快节奏的生活中&#xff0c;我们经常会遇到各种繁忙的事务和容易遗忘的备忘事项。为避免大家遗忘重要的事情&#xff0c;大家可以在常用的手机上安装记录备忘事项的工具&#xff0c;为了帮助安卓用户高效地记录和管理这些信息&#xff0c;今天我将向大家推荐一款功能强大…

ElasticSearch集群环境搭建

1、准备三台服务器 这里准备三台服务器如下: IP地址主机名节点名192.168.225.65linux1node-1192.168.225.66linux2node-2192.168.225.67linux3node-3 2、准备elasticsearch安装环境 (1)编辑/etc/hosts&#xff08;三台服务器都执行&#xff09; vim /etc/hosts 添加如下内…

竞赛选题 深度学习大数据物流平台 python

文章目录 0 前言1 课题背景2 物流大数据平台的架构与设计3 智能车货匹配推荐算法的实现**1\. 问题陈述****2\. 算法模型**3\. 模型构建总览 **4 司机标签体系的搭建及算法****1\. 冷启动**2\. LSTM多标签模型算法 5 货运价格预测6 总结7 部分核心代码8 最后 0 前言 &#x1f5…

数学建模比赛中常用的建模提示词(数模prompt)

以下为数学建模比赛中常用的建模提示词&#xff0c;希望对你有所帮助&#xff01; 帮我总结一下数学建模有哪些预测类算法&#xff1f; 灰色预测模型级比检验是什么意思? 描述一下BP神经网络算法的建模步骤 对于分类变量与分类变量相关性分析用什么算法 前10年的数据分别是1&a…

QT 实现两款自定义的温度计/湿度控件

文章目录 0 引入1、带有标尺的温度/湿度计控件1.头文件2.核心代码 2、竖起来的温度/湿度计控件1.头文件2.实现 3、引用 0 引入 QT原生控件没有实现如仪表盘或者温度计的控件&#xff0c;只好自己实现&#xff0c;文章代码部分参考引用的文章。直接上图 图一 带有标尺的温度计…