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的页面,并且能够进行切换了,其具体如下图所示:

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

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

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

相关文章

【周总结平淡但不平凡的周末】

上周总结 根据系统生产环境的日志文件&#xff0c;写了个脚本统计最近使用我们系统的用户的手机型号以及系统&#xff0c;帮助聚焦主要测试的机型&#xff0c;以及系统类型 依然是根据时区不同对项目进行改造&#xff0c;还有一个开发好的接口需要下周联调 2024/3/3 晴…

QT Mingw32/64编译ffmpeg源码生成32/64bit库以及测试

文章目录 前言下载msys2ysamFFmpeg 搭建编译环境安装msys2安装QT Mingw编译器到msys环境中安装ysam测试 编译FFmpeg测试 前言 FFmpeg不像VLC有支持QT的库文件&#xff0c;它仅提供源码&#xff0c;需要使用者自行编译成对应的库&#xff0c;当使用QTFFmpeg实现播放视频以及视频…

连接 mongodb集群的集中方式

mongodb 连接到复制集 mongodb://node1,node2,node3.../database?[options]mongodb 连接到分片集 mongodb://mongos1,mongos2,mongos3.../database?[options]使用 mongosrv 通过域名解析得到所有的 mongos 或 节点的地址, 而不是把这些写在连接字符串中. mongodbsrv://se…

经典的算法面试题(1)

题目&#xff1a; 给定一个整数数组 nums&#xff0c;编写一个算法将所有的0移到数组的末尾&#xff0c;同时保持非零元素的相对顺序。 示例: 输入: [0,1,0,3,12] 输出: [1,3,12,0,0] 注意&#xff1a;必须在原数组上操作&#xff0c;不能拷贝额外的数组。尽量减少操作次数。 这…

数据处理——一维数组转列向量(分割时间序列为数据块时的问题)

记录在处理数据时被磕绊了一下的一个处理细节。 1.想要达到的要求 在某次滑动窗口取样时间序列数据时&#xff0c;我得到如下一个以一维数组为元素的列表&#xff1a; 对于如上输出列表中的每个一维数组&#xff0c;我希望将其转换为下图中的形式&#xff0c;简单说就是希望他…

【详识JAVA语言】面向对象程序三大特性之三:多态

多态 多态的概念 多态的概念&#xff1a;通俗来说&#xff0c;就是多种形态&#xff0c;具体点就是去完成某个行为&#xff0c;当不同的对象去完成时会产生出不同的状态。 多态实现条件 在java中要实现多态&#xff0c;必须要满足如下几个条件&#xff0c;缺一不可&#xf…

循环队列与循环双端队列

文章目录 前言循环队列循环双端队列 前言 1、学习循环队列和循环双端队列能加深我们对队列的理解&#xff0c;提高我们的编程能力。 2、本文循环队列使用的是数组&#xff0c;循环双端队列用的是双向链表 3、题目连接&#xff1a;设计循环队列 &#xff0c;设计循环双端队列。 …

【机器学习】有监督学习算法之:支持向量机

支持向量机 1、引言2、决策树2.1 定义2.2 原理2.3 实现方式2.4 算法公式2.5 代码示例 3、总结 1、引言 小屌丝&#xff1a;鱼哥&#xff0c;泡澡啊。 小鱼&#xff1a;不去 小屌丝&#xff1a;… 此话当真&#xff1f; 小鱼&#xff1a;此话不假 小屌丝&#xff1a;到底去还是…

什么是支持向量机(Support vector machine)和其原理

作为机器学习的基础算法&#xff0c;SVM被反复提及&#xff0c;西瓜书、wiki都能查到详细介绍&#xff0c;但是总是觉得还差那么点&#xff0c;于是决定自己总结一下。 一、什么是SVM&#xff1f; 1、解决什么问题&#xff1f; SVM&#xff0c;最原始的版本是用于最简单的线…

总结 HashTable, HashMap, ConcurrentHashMap 之间的区别

1.多线程环境使用哈希表 HashMap 不行,线程不安全 更靠谱的,Hashtable,在关键方法上加了synchronized 后来标准库又引入了一个更好的解决方案;ConcurrentHashMap 2.HashMap 首先HashMap本身线程不安全其次HashMap的key值可以为空&#xff08;当key为空时&#xff0c;哈希会…

【Java数据结构】——五道算法题让你灵活运用Map和Set

目录 一.只出现一次的数字 二.宝石与石头 三.旧键盘 四.给定一个数组&#xff0c;统计每个元素出现的次数 五.前K个高频单词 一.只出现一次的数字 136. 只出现一次的数字 - 力扣&#xff08;LeetCode&#xff09; 算法原理&#xff1a;我们将nums中每个元素都存入到set中…

ASUS华硕天选5笔记本电脑FX607JV原装出厂Win11系统下载

ASUS TUF Gaming F16 FX607JV天选五原厂Windows11系统 适用型号&#xff1a; FX607JU、FX607JI、FX607JV、 FX607JIR、FX607JVR、FX607JUR 下载链接&#xff1a;https://pan.baidu.com/s/1l963wqxT0q1Idr98ACzynQ?pwd0d46 提取码&#xff1a;0d46 原厂系统自带所有驱动、…

python自动化学习--3.8python操作EXCEL文件python日志收集处理

1、Excel文件处理 安装 openpxl 第三方库 openpxl 模块三大组件: 1、工作簿 &#xff08;包含多个sheet工作表&#xff09; 2、工作表 &#xff08;某个数据包含在某个工作表&#xff09; 3、单元格 1、创建excel工作簿 import openpyxl"""Excel表格的创建…

GotoXy控制台光标的位置更新

光标控制解释 控制台的光标更新方法, 用于控制数据输出位置 void gotoXY(int x, int y)//新函数&#xff1a;更新光标 {COORD c;c.X x;c.Y y;SetConsoleCursorPosition(GetStdHandle(STD_OUTPUT_HANDLE), c); }代码解释 这段代码定义了一个名为 gotoXY 的函数&#xff0c;…

【Spring Boot】实现全局异常处理

1.定义基础异常接口类 /*** description: 服务接口类* author: MrVK* date: 2021/4/19 21:39*/ public interface BaseErrorInfoInterface {/*** 错误码* return*/String getResultCode();/*** 错误描述* return*/String getResultMsg(); } 2.定义错误处理枚举类 /*** desc…

小伙伴询问AI该怎么学习?本人的一点总结,以思维导图呈现

如有需要思维导图的在后台请留邮箱&#xff0c;相关知识结构目录 部分导图

nn.Linear() 使用提醒

原本以为它是和nn.Conv2d()一样&#xff0c;就看第二个维度的数值&#xff0c;今天才知道&#xff0c;它是只看最后一个维度的数值&#xff01;&#xff01;&#xff01; 例子1 Descripttion: Result: Author: Philo Date: 2024-02-27 14:33:50 LastEditors: Philo LastEditT…

如何使用“Ubuntu 20.04桌面版,安装MariaDB数据库“?win10系统?

1、更新软件包 sudo apt update 2、 安装MariaDB服务器和客户端 sudo apt install mariadb-server mariadb-client 3、 查看MeriaDB是否运行 service mysql status :q"退回命令行状态 4、 设置MariaDB root用户的密码 sudo mysql_secure_installation 5、 MariaD…

斐波那契数列模型----三步问题

面试题 08.01. 三步问题 - 力扣&#xff08;LeetCode&#xff09; 1、状态表示&#xff1a; 题目要求&#xff1a;上到n阶台阶&#xff0c;有多少种方法。那么n逐渐简化&#xff0c;上1阶台阶有多少种方法&#xff1b;上2阶台阶有多少种方法……直到上n阶台阶有多少种方法。 …

代码随想录第45天|● 70. 爬楼梯 (进阶) ● 322. 零钱兑换 ● 279.完全平方数

文章目录 ● 70. 爬楼梯 &#xff08;进阶&#xff09;思路&#xff1a;- 排列 先value后weight代码&#xff1a; ● 322. 零钱兑换思路&#xff1a;代码 ● 279.完全平方数思路&#xff1a;代码 ● 70. 爬楼梯 &#xff08;进阶&#xff09; 思路&#xff1a;- 排列 先value后…