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

news2024/11/29 5:45:58

文章目录

  • 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.coloradmin.cn/o/1174692.html

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

相关文章

JAVA应用中线程池设置多少合适?

目录 1、机器配置&#xff1a; 2、核心线程数 3、最大线程数多少合适&#xff1f; 4、理论基础 5、测试验证 一个线程跑满一个核心的利用率 6个线程 12 个线程&#xff1a;所有核的cpu利用率都跑满 有io操作 6、计算公式 7、决定最大线程数的流程&#xff1a; 1、机器…

【CAN通信栈基础】针对CAN通信栈,浅谈操作系统中断和轮询之间的区别和优劣

1. 前言 在操作系统中(例如AUTOSAR OS),中断和轮询是处理需要快速行动的事件的两种方法。中断是通过向CPU发送立即采取行动的信号来通知CPU需要注意的事件,而轮询则是CPU不断检查设备状态以确定是否需要CPU的注意。本文将详细探讨CAN通信中断和轮询之间的差异和优劣。 2.…

【ES专题】ElasticSearch集群架构剖析

目录 前言阅读对象阅读导航前置知识笔记正文一、ES集群架构1.1 为什么要使用ES集群架构1.2 ES集群核心概念1.2.1 节点1.2.1.1 Master Node主节点的功能1.2.1.2 Data Node数据节点的功能1.2.1.3 Master Node主节点选举流程 1.2.2 分片1.3 搭建三节点ES集群1.3.1 ES集群搭建步骤1…

java高级之单元测试、反射

1、Junit测试工具 Test定义测试方法 1.被BeforeClass标记的方法,执行在所有方法之前 2.被AfterCalss标记的方法&#xff0c;执行在所有方法之后 3.被Before标记的方法&#xff0c;执行在每一个Test方法之前 4.被After标记的方法&#xff0c;执行在每一个Test方法之后 public …

Grōk :马斯克 xAI 打造的 ChatGPT 竞争产品探索

本心、输入输出、结果 文章目录 Grōk &#xff1a;马斯克 xAI 打造的 ChatGPT 竞争产品探索前言Grōk 名称的解释Grōk AI 目前被曝光了 11 项功能超长prompt&#xff08;SuperPrompt&#xff09;支持个性化设置快速响应庞大的知识库实时搜索API接口语音就绪图像生成图像识别音…

【蓝桥杯省赛真题43】Scratch神奇哈哈镜 蓝桥杯少儿编程scratch图形化编程 蓝桥杯省赛真题讲解

目录 scratch神奇哈哈镜 一、题目要求 编程实现 二、案例分析 1、角色分析

OCI制作

1.制作OCI包并运行容器 容器镜像本质上就是一个根文件系统镜像。但容器镜像又不仅仅是一个根文件系统镜像&#xff0c;容器镜像有一个OCI标准规范&#xff0c;而runc命令用于运行根据OCI规范打包的应用程序&#xff0c;也就是说&#xff0c;runc命令是OCI规范的兼容实现。 OCI容…

shell script函数function篇

function fname(){ 程序段 } #这个比较熟悉了&#xff0c;和其他计算机语言定义函数的格式都是相同的&#xff0c;上案例&#xff0c;自定义printf函数 总结&#xff1a;函数定义的格式&#xff0c;和其他语言大同小异&#xff0c;不同的是在函数调用方面&#xff0c;c和java…

【GEE】4、 Google 地球引擎中的数据导入和导出

1简介 在本模块中&#xff0c;我们将讨论以下概念&#xff1a; 如何将您自己的数据集引入 GEE。如何将来自遥感数据的值与您自己的数据相关联。如何从 GEE 导出特征。 2背景 了解动物对环境的反应对于了解如何管理这些物种至关重要。虽然动物被迫做出选择以满足其基本需求&am…

机器学习---SVM目标函数求解,SMO算法

1. 线性可分支持向量机 1.1 定义输入数据 假设给定⼀个特征空间上的训练集为&#xff1a; 其中&#xff0c;(x , y )称为样本点。 x 为第i个实例&#xff08;样本&#xff09;。 y 为x 的标记&#xff1a; 当y 1时&#xff0c;x 为正例&#xff1b;当y −1时&#xff0c;x…

✔ ★【备战实习(面经+项目+算法)】 11.5学习

✔ ★【备战实习&#xff08;面经项目算法&#xff09;】 坚持完成每天必做如何找到好工作1. 科学的学习方法&#xff08;专注&#xff01;效率&#xff01;记忆&#xff01;心流&#xff01;&#xff09;2. 每天认真完成必做项&#xff0c;踏实学习技术 认真完成每天必做&…

【LeetCode力扣】287.寻找重复数

1、题目介绍 原题链接&#xff1a;287. 寻找重复数 - 力扣&#xff08;LeetCode&#xff09; 示例 1&#xff1a; 输入&#xff1a;nums [1,3,4,2,2] 输出&#xff1a;2示例 2&#xff1a; 输入&#xff1a;nums [3,1,3,4,2] 输出&#xff1a;3提示&#xff1a; 1 < n &l…

由于找不到vcomp140.dll,无法继续执行代码问题的5种修复方法

在计算机使用过程中&#xff0c;我们经常会遇到一些奇怪的错误提示&#xff0c;其中最常见的就是“无法找到xxx.dll文件”。而其中一个常见的问题就是“找不到vcomp140.dll无法继续执行代码”这个错误通常会导致某些应用程序无法正常运行。那么&#xff0c;当遇到这个问题时&am…

腾讯云CVM服务器购买流程_省钱入口(一步步操作)

腾讯云服务器购买流程直接在官方秒杀活动上购买比较划算&#xff0c;在云服务器CVM或轻量应用服务器页面自定义购买价格比较贵&#xff0c;但是自定义购买云服务器CPU内存带宽配置选择范围广&#xff0c;活动上购买只能选择固定的活动机&#xff0c;选择范围窄&#xff0c;但是…

删除链表的倒数第 N 个结点

LeetCode 19. 删除链表的倒数第 N 个结点 /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(nullptr) {}* ListNode(int x) : val(x), next(nullptr) {}* ListNode(int x, ListNode *n…

Sublime Text 4 激活教程,内含码(亲测有效) 原创

给大家分享一个 Sublime Text 4 免费注册方法&#xff0c;亲测可用&#xff0c;希望能帮助到大家&#xff0c;上面是我激活成功的截图。 前言 Sublime Text 是一个轻量、简洁、高效、跨平台的编辑器。 Sublime Text具有漂亮的用户界面和强大的功能&#xff0c;例如代码缩略图…

Glide transform CircleCrop()圆图,Kotlin

Glide transform CircleCrop()圆图&#xff0c;Kotlin import android.os.Bundle import android.widget.ImageView import androidx.appcompat.app.AppCompatActivity import com.bumptech.glide.load.resource.bitmap.CircleCropclass MainActivity : AppCompatActivity() {o…

【Mybatis小白从0到90%精讲】15: Mybatis配置打印SQL日志

文章目录 前言配置日志实现前言 日志(Log)是每个程序都不可或缺的一部分,它可以帮助开发人员诊断和调试问题。Mybatis,作为一款备受赞誉的ORM框架,自然也提供了强大的日志功能。 它不仅提供了内置的标准实现,还支持集成各种主流的日志框架,让我们可以轻松地查看最终执行…

C++入门指南:string类文档详细解析(非常经典,建议收藏)

C入门指南&#xff1a;string类 一、 string类解读二、 string类的常用接口说明2.1 string类对象的常见构造2.2 string类对象的容量操作2.3 string类对象的访问及遍历操作2.4 string类对象的修改操作2.5 string类非成员函数 一、 string类解读 string类文档 具体如下&#xff…

剑指JUC原理-12.手写简易版线程池思路

&#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是爱吃芝士的土豆倪&#xff0c;24届校招生Java选手&#xff0c;很高兴认识大家&#x1f4d5;系列专栏&#xff1a;Spring源码、JUC源码&#x1f525;如果感觉博主的文章还不错的话&#xff0c;请&#x1f44d;三连支持&…