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

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

相关文章

2019数二(二重积分的不等式问题)

注&#xff1a; 1、在相同积分区域内的积分比较大小&#xff1a;被积函数大的积分值大&#xff0c;被积函数小的积分值小 2、在区间[0&#xff0c;Π/2]上 &#xff1a;sinx < x < tanx

前端面试题之CSS篇

1、css选择器及其优先级 标签选择器: 1类选择器、属性选择器、伪类选择器&#xff1a;10id选择器&#xff1a;100内联选择器&#xff08;style“”&#xff09;&#xff1a;1000!important&#xff1a;10000 2、display的属性值及其作用 属性值作用none元素不显示&#xff0c…

zookeeper本地部署和集群搭建

zookeeper&#xff08;动物园管理员&#xff09;是一个广泛应用于分布式服务提供协调服务Apache的开源框架 Zookeeper从设计模式角度来理解&#xff1a;是一个基于观察者模式设计的分布式服务管理框架&#xff0c;它 负责存储和管理大家都关心的数据 &#xff0c;然 后 接受观察…

初阶JavaEE(14)表白墙程序

接上次博客&#xff1a;初阶JavaEE&#xff08;13&#xff09;&#xff08;安装、配置&#xff1a;Smart Tomcat&#xff1b;访问出错怎么办&#xff1f;Servlet初识、调试、运行&#xff1b;HttpServlet&#xff1a;HttpServlet&#xff1b;HttpServletResponse&#xff09;-C…

QQ怎么恢复聊天记录?3个方法解决聊天记录丢失问题!

对很多人来说&#xff0c;QQ聊天记录保留了宝贵的信息与青春回忆。这是使得许多小伙伴久久不舍得卸载QQ的重要原因之一。然而&#xff0c;由于各种原因&#xff0c;有时我们会遇到聊天记录丢失的情况。qq怎么恢复聊天记录&#xff1f;如果您意外删除了QQ聊天记录并感到焦虑、不…

【大数据】常见的数据抽取方法

常见的数据抽取方法 1.基于查询式的数据抽取1.1 触发器方式&#xff08;又称快照式&#xff09;1.2 增量字段方式1.3 时间戳方式1.4 全表删除插入方式 2.基于日志的数据抽取 数据抽取 是指从源数据源系统抽取需要的数据。实际应用中&#xff0c;数据源较多采用的是关系数据库。…

关于笔记平台的使用感受分享

关于笔记平台的使用感受分享 前言我用过的笔记平台笔记平台简单评价巴拉巴拉WPS文档/OneNote/TowerNotion/语雀各种博客平台 个人使用率最高的平台 前言 最近也有部分同学问我平常用的笔记平台是什么&#xff0c;以及我比较推荐的平台是什么。这里不是广告哈&#xff0c;因为我…

数据可视化:地图

1.基础地图的使用 如何添加颜色表示层级 代码实现 """基础地图的使用 """ from pyecharts.charts import Map from pyecharts.options import VisualMapOpts# 准备地图对象 map Map() # 准备数据 data [("北京市", 9),("上海市…

墨者学院 内部文件上传系统漏洞分析溯源

打开web页面&#xff1a; 是个文件上传&#xff0c;先随便上传一个 txt 文件并抓包&#xff1a; 木马文件&#xff1a; <%eval request ("123")%>发现是个 IIS&#xff0c;并且给了文件的上传路径 upload&#xff0c;那就尝试上传 asp 一句话&#xff0c;直接…

Android Studio(对话框AlertDialog)

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

Excel文档名称批量翻译的高效方法

在处理大量文件时&#xff0c;我们常常需要借助一些工具来提高工作效率。例如&#xff0c;在需要对Excel文档名称进行批量翻译时&#xff0c;一个方便快捷的工具可以帮助我们省去很多麻烦。今天&#xff0c;我将介绍一款名为固乔文件管家的软件&#xff0c;它能够帮助我们轻松实…

pandas DataFrame转成字典

目录 dict形式list形式records形式split形式 dict形式 原数据 DateFrame.to_dict() pd.read_excel(r"D:\Users\admin\Desktop\授信额度使用.xlsx").to_dict()list形式 DateFrame.to_dict(‘list’) pd.read_excel(r"D:\Users\admin\Desktop\授信额度使用.x…