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

Vue路由(黑马程序员)

路由介绍

将资代码/vue-project(路由)/vue-project/src/views/tlias/DeptView.vue拷贝到我们当前EmpView.vue同级,其结构如下:

此时我们希望,实现点击侧边栏的部门管理,显示部门管理的信息,点击员工管理,显示员工管理的信息,效果如下图所示:

这就需要借助我们的vue的路由功能了。

前端路由:URL中的hash(#号之后的内容)与组件之间的对应关系,如下图所示:

当我们点击左侧导航栏时,浏览器的地址栏会发生变化,路由自动更新显示与url所对应的vue组件。

而我们vue官方提供了路由插件Vue Router,其主要组成如下:

    ● VueRouter:路由器类,根据路由请求在路由视图中动态渲染选中的组件

    ● <router-link>:请求链接组件,浏览器会解析成<a>

    ● <router-view>:动态视图组件,用来渲染展示与路由路径对应的组件

其工作原理如下图所示:

首先VueRouter根据我们配置的url的hash片段和路由的组件关系去维护一张路由表;

然后我们页面提供一个<router-link>组件,用户点击,发出路由请求;

接着我们的VueRouter根据路由请求,在路由表中找到对应的vue组件;

最后VueRouter会切换<router-view>中的组件,从而进行视图的更新。

路由入门

接下来我们来演示vue的路由功能。

首先我们需要先安装vue-router插件,可以通过如下命令

npm install vue-router@3.5.1

但是我们不需要安装,因为当初我们再创建项目时,已经勾选了路由功能,已经安装好了。

然后我们需要在src/router/index.js文件中定义路由表,根据其提供的模版代码进行修改,最终代码如下:

import Vue 'vue'
import VueRouter 'vue-router'Vue.use(VueRouter)const routes = [{path: '/emp',  //地址pathname: 'emp',component: () => import('../views/tlias/EmpView.vue')  //对应的vue组件},{path: '/dept',name: 'dept',component: () => import('../views/tlias/DeptView.vue')}
]const router = new VueRouter({routes
})export default router

注意需要去掉没有引用的import模块。

在main.js中,我们已经引入了router功能,如下图所示:

路由基本信息配置好了,路由表已经被加载,此时我们还缺少2个东西,就是<router-lin>和<router-view>,所以我们需要修改2个页面(EmpView.vue和DeptView.vue)我们左侧栏的2个按钮为router-link,其代码如下:

<el-menu-item index="1-1"><router-link to="/dept">部门管理</router-link>
</el-menu-link>
<el-menu-item index="1-2"><router-link to="/emp">员工管理</router-link>
</el-menu-item>

然后我们还需要在内容展示区域即App.vue中定义route-view,作为组件的切换,其App.vue的完整代码如下:

<template><div id="app"><!-- {{message}} --><!-- <element-view></element-view> --><!-- <emp-view></emp-view> --><router-view></router-view></div>
</template><script>
// import EmpView  './views/tlias/EmpView.vue'
// import ElementView  './views/Element/ElementView.vue'
export default {components: { },data(){return {"message":"hello world"}}
}
</script>
<style></style>

但是我们浏览器打开地址: http://localhost:7000/ ,发现一片空白,因为我们默认的路由路径是/,但是路由配置中没有对应的关系,

所有我们需要在路由配置中/对应的路由组件,代码如下:

const routes = [{path: '/emp',name: 'emp',component:  () => import('../views/tlias/EmpView.vue')},{path: '/dept',name: 'dept',component: () => import('../views/tlias/DeptView.vue')},{path: '/',redirect:'/emp' //表示重定向到/emp即可},
]

此时我们打开浏览器,访问http://localhost:7000发现直接访问的是emp的页面,并且能够进行切换了,其具体如下图所示:

到此我们的路由实现成功。

相关文章:

Vue路由(黑马程序员)

路由介绍 将资代码/vue-project(路由)/vue-project/src/views/tlias/DeptView.vue拷贝到我们当前EmpView.vue同级&#xff0c;其结构如下&#xff1a; 此时我们希望&#xff0c;实现点击侧边栏的部门管理&#xff0c;显示部门管理的信息&#xff0c;点击员工管理&#xff0c;显…...

【Java程序员面试专栏 算法思维】一 高频面试算法题:排序算法

一轮的算法训练完成后,对相关的题目有了一个初步理解了,接下来进行专题训练,以下这些题目就是汇总的高频题目,本篇主要聊聊排序算法,包括手撕排序算法,经典的TOPK问题以及区间合并,所以放到一篇Blog中集中练习 题目关键字解题思路时间空间快速排序双指针+递归+基准值分…...

sql注入之sqli-labs-less-1 错误注入

输入?id1 得到登录页面&#xff1a; 通过order by 函数试探&#xff1a; 5的时候报错 试探到3 的时候返回正确的值&#xff1a; 然后继续注入&#xff1a;?id -1 union select 1,2,3 -- 查看回显点&#xff1a; 开始查看数据库内容&#xff1a;id-1 union select 1,databa…...

React withRouter的使用及源码实现

一 基本介绍 作用&#xff1a; 把不是通过路由切换过来的组件中&#xff0c;将react-router 的 history、location、match 三个对象传入props对象上。比如首页&#xff01; 默认情况下必须是经过路由匹配渲染的组件才存在this.props&#xff0c;才拥有路由参数&#xff0c;才能…...

c++之旅——第四弹

大家好啊&#xff0c;这里是c之旅第三弹&#xff0c;跟随我的步伐来开始这一篇的学习吧&#xff01; 如果有知识性错误&#xff0c;欢迎各位指正&#xff01;&#xff01;一起加油&#xff01;&#xff01; 创作不易&#xff0c;希望大家多多支持哦&#xff01; 本篇文章的主…...

Mysql整理-主从复制

MySQL的主从复制是一种常见的数据复制和分布式数据共享方法。在这种架构中,一个MySQL服务器充当主(master)服务器,而一个或多个其他MySQL服务器充当从(slave)服务器。数据从主服务器复制到从服务器,实现数据的分布和备份。这种设置主要用于数据备份、读取扩展、灾难恢复…...

100个百万阅读公众号爆文案例

100个100万公众号爆文案例 自从公众号流量推送修改之后&#xff0c;原来的私域玩法一去不复返&#xff0c;公域公众号正在崛起 现在公众号的玩法就是找爆款&#xff0c;去对标&#xff0c;去学习&#xff0c;努力使自己的公众号进入流量池&#xff0c;然后吃流量主的收益 这里…...

UnityAPI的学习——Transform类

Transform类继承自Component类&#xff0c;并实现了IEnumberable接口。Transform是GameObject必须拥有得一个组件&#xff0c;用来管理所在GameObject对象的坐标位置、选择角度、和大小缩放。 Transform实现了IEnumberable接口&#xff0c;因此可以在程序中使用foreach()方法快…...

(全部习题答案)研究生英语读写教程基础级教师用书PDF|| 研究生英语读写教程提高级教师用书PDF

研究生英语读写教程基础级教师用书PDF 研究生英语读写教程提高级教师用书PDF pdf下载&#xff08;完整版下载&#xff09; &#xff08;1&#xff09;研究生英语读写教程基础级教师用书PDF &#xff08;2&#xff09;研究生英语读写教程基提高级教师用书PDF...

GO基本类型

Go语言同时提供了有符号和无符号的整数类型。 有符号整型&#xff1a;int、int8、int64、int32、int64无符号整型&#xff1a;uint、uint8、uint64、uint32、uint64、uintptr 有符号整型范围&#xff1a;-2^(n-1) 到 2^(n-1)-1 无符号整型范围: 0 到 2^n-1 实际开发中由于编…...

怎么快速编辑视频

背景&#xff1a;怎么简单快速编辑视频 利用FFmpeg功能&#xff0c;简单快速编辑视频&#xff0c;如按9:16提前剪切视频、替换背景音乐。 下载FFmpeg&#xff1a;https://ffmpeg.org/download.html 将FFmpeg的路径添加到环境变量中&#xff1a; Windows&#xff1a;在系统的环…...

基于vue-office实现docx、xlsx、pdf文件的在线预览

概述 在做项目的时候会遇到docx、xlsx、pdf等文件的在线预览需求&#xff0c;实现此需求可以有多种解决方式&#xff0c;本文基于vue-office实现纯前端的文件预览。 效果 如下图&#xff0c;分别为docx、xlsx、pdf三种类型的文件在线加载后的效果。你也可以访问官方预览网址…...

数据库系统架构与DBMS功能探微:现代信息时代数据管理的关键

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua&#xff0c;在这里我会分享我的知识和经验。&#x…...

51单片机-(中断系统)

51单片机-&#xff08;中断系统&#xff09; 了解51单片机中断系统、中断源、中断响应条件和优先级等&#xff0c;通过外部中断0实现按键控制LED亮灭为例理解中断工作原理和编程实现过程。 1.中断系统结构 89C51/52的中断系统有5个中断源 &#xff0c;2个优先级&#xff0c;…...

c++之旅——第三弹

大家好啊&#xff0c;这里是c之旅第三弹&#xff0c;跟随我的步伐来开始这一篇的学习吧&#xff01; 如果有知识性错误&#xff0c;欢迎各位指正&#xff01;&#xff01;一起加油&#xff01;&#xff01; 创作不易&#xff0c;希望大家多多支持哦&#xff01; 一.命名空间;…...

GO—函数

Go 语言支持普通函数、匿名函数和闭包&#xff0c;从设计上对函数进行了优化和改进&#xff0c;让函数使用起来更加方便。 Go 语言的函数属于“一等公民”&#xff08;first-class&#xff09;&#xff0c;也就是说&#xff1a; 函数本身可以作为值进行传递。支持匿名函数和闭…...

[WebUI Forge]ForgeUI的安装与使用 | 相比较于Auto1111 webui 6G显存速度提升60-75%

ForgeUI的github主页地址:https://github.com/lllyasviel/stable-diffusion-webui-forge Stable Diffusion WebUI Forge 是一个基于Stable Diffusion WebUI(基于Gradio)的平台,可简化开发、优化资源管理并加快推理速度。 “Forge”这个名字的灵感来自于“Minecraft Forge”…...

高刷显示器 - HKC VG253KM

&#x1f525;&#x1f525; 今天来给大家揭秘一款电竞神器 - HKC VG253KM 高刷电竞显示器&#xff01;这款显示器可是有着雄鹰展翅般的设计灵感&#xff0c;背后的大鹏展翅鹰翼图腾让人过目难忘。那么&#xff0c;这款显示器到底有哪些过人之处呢&#xff1f;一起来看看吧&…...

javascript实现的星座查询

今天在这个网站http://xzxys.wiicha.com/看到查询星座幸运色的效果&#xff0c;想研究一下代码&#xff0c;结果右键禁用。后来参考了一下别人的代码&#xff0c;琢磨着先实现了一下星座查询的功能&#xff0c;输入月份和日期四位数后&#xff0c;可以查询属于哪个星座&#xf…...

全国青少年软件编程(Python)等级考试试卷(一级) 测试卷2021年12月

第 1 题 【 单选题 】 下面程序的运行结果是什么&#xff1f;&#xff08; &#xff09; a10 b5 ca*b print(c) A :10 B :15 C :50 D :5 正确答案:C 试题解析: 第 2 题 【 单选题 】 与a>b and b>c等价的是&#xff1f;&#xff08; &#xff09; A…...

观成科技:隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

Python爬虫(一):爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

C# 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

基于Java+MySQL实现(GUI)客户管理系统

客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息&#xff0c;对客户进行统一管理&#xff0c;可以把所有客户信息录入系统&#xff0c;进行维护和统计功能。可通过文件的方式保存相关录入数据&#xff0c;对…...

RSS 2025|从说明书学习复杂机器人操作任务:NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

视觉语言模型&#xff08;Vision-Language Models, VLMs&#xff09;&#xff0c;为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展&#xff0c;机器人仍难以胜任复杂的长时程任务&#xff08;如家具装配&#xff09;&#xff0c;主要受限于人…...

Rust 开发环境搭建

环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行&#xff1a; rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu ​ 2、Hello World fn main() { println…...