Vue.js前端开发零基础教学(六)

学习目标

了解什么是路由,能够说出前端后端路由的原理

掌握多种路由的使用方法,能够实现路由的不同功能

掌握Vue Router的安装及基本使用方法

5.1 初始路由   

提到路由(Route),一般我们会联想到网络中常见的路由器(Router),那么路由和路由有什么关联呢?路由是指路由器从一个接口接收到数据,根据数据的目的地址将数据传送到另一个接口的行为和动作;而路由器是执行行为和动作的硬件设备,只要用于连接网络,实现不同网络之间的通信和数据传递。

     Web开发也有路由的概念。Web开发中的路由用于根据用户请求的URL地址分配对应的处理程序 根据技术的不同,web开发的路由分为后端路由前端路由,下面分别进行介绍 。

1.后端路由

后端路由的整个过程发生在服务器端,开发者需要在服务程序中建立一套后端路由规则。当服务器收到请求后,会通过路由寻找当前请求的URL地址对应的处理程序。

Node.js环境中的Express框架的路由属于后端路由。   

2.前端路由

前端路由由整个过程发生在浏览器端,其特点是当URL地址改变时不需要向服务器发送一个加载新页面的请求,而是在维持当前页面的情况下切换页面中显示的内容。  

  (1)Hash模式

Hash模式的前端路由通过URL中从“#”开始的部分实现不同组件之间的切换,“#”表示Hash符,“#”后面的值称为Hash值,该值将用于进行路由匹配。

(2)HTML5模式

HTML5模式的URL地址与后端路由的URL地址的风格一致,可以通过URL地址中的路径进行路由匹配。HTML5模式利用HTML5新增的history.pushStae()方法实现了在浏览器中维持当前页面的情况下改变URL地址的路径。

5.2 初识Vue Router

vue Router是Vue官方提供的路由管理器,它与Vue.js核心深度集成,从而使构建单页Web应用变得更加简单。

5.2.1 vue Router的安装

Vue Router有多个版本,其中,vue Router4适用于Vue3,而vue Router3适用于Vue2.

首先新建vue3项目,命名为“第五章”,随后右键如图所示

   弹出命令黑框

 输入“yarn add vue-router@4”

这种情况就是安装成功了

5.2.2 Vue Router的基本使用

完成Vue Router安装后,就可以使用路由了。路由的基本使用步骤是:首先定义路由组件,以便使用Vue Router控制路由组件的展示与切换;接着定义路由链接和路由视图,以便告知路由组件渲染到页面的哪个位置;然后在项目中创建路由模块;最后导入并挂载路由模块。

1.定义路由组件

在第五章项目中分别建立两个组件,分别是Home(首页)组件和About(关于)组件,如下所示。

Home`.vue(首页)组件代码如下:

<template><div class="home-con"><h3>这是我的首页组件</h3></div>
</template><script></script><style scoped>.home-con{min-height: 150px;background-color: #f2f2f2;padding: 15px;}
</style>

About.vue(关于)组件代码如下:

<template><div class="about-con"><h3>这是我的关于组件</h3></div>
</template><script></script><style scoped>.about-con{min-height: 150px;background-color: #f2f2f2;padding: 15px;}
</style>

App.vue代码:

<script setup></script><template><div class='app-con'><h1>这是我的根组件</h1><router-link to="/home">首页</router-link><router-link to="/about">关于</router-link><hr/><!--路由视图渲染路由组件的内容--><router-view></router-view></div>
</template><style scoped>.app-con{text-align: center;font-size: 16px;}.app-con a{color: #000;padding: 10px;}.app-con a.router-link-active{color: #fff;background-color: #000;}
</style>

router.js代码:

import Home from './components/Home.vue'
import About from './components/About.vue'
import { createRouter, createWebHashHistory } from 'vue-router'
//createRouter创建路由实例
//history指定路由的工作模式
//routes路由匹配规则(属性值为数组)
const router =createRouter({history:createWebHashHistory(),routes:[{path:'/Home',component:Home},{path:'/About',component:About},]
});
//导出路由实例对象
export default router;

 修改main.js代码:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router.js'
const app=createApp(App);
app.use(router)
app.mount('#app')
// createApp(App).mount('#app')

运行结果:

点击首页界面 ,弹出首页界面 

点击“关于”呈现出“我的关于组件”

在router.js加入一行代码,可以直接指定运行浏览器中显示该界面

{path:'/',redirect:'/Home'},//自动跳转到home界面

 运行结果:

5.3 嵌套路由

语法格式:

routers:[
{
path:'父路由路径,
component:父组件,
childeren:[
{path:'子路由路径1',component:组件1},
{path:'子路由路径2',component:组件2},
]
}
]

在组件中定义路由链接的语法格式如下:

<router-link to="/父路由路径/子路由路径"></router-link>

演示嵌套路由的实现

在src/components目录下创建pages目录,用于放子路由组件

创建Tab1.vue文件

<template><div>Tab1组件</div>
</template><script>
</script><style scoped>div{/* 显示时的文本居左对齐 */text-align: left;/* 显示时的背景色 */background-color: #9dc4e5;}
</style>

创建Tab2.vue文件

<template><div>Tab2组件</div>
</template><script>
</script><style scoped>div{/* 显示时的文本居左对齐 */text-align: left;/* 显示时的背景色 */background-color: #ffba00;}
</style>

创建About.vue文件

<template><div class="about-container"><h3>About组件</h3><!-- 嵌套路由的子路由器连接 --><router-link to="/about/tab1">tab1</router-link><router-link to="/about/tab2">tab2</router-link><hr /><router-view></router-view></div>
</template><script>
</script><style scoped>.about-container{min-height: 150px;/* 显示的背景颜色 */background-color: blueviolet;padding: 15px;}.about-container a{padding: 10px;border: 1px solid #ccc;border-radius: 5px;padding: 5px 10px;/* 字体颜色 */color: crimson;margin: 0 5px;}.about-container a.router-link-active{/* 选中后字体颜色 */color: gold;/* 选中后的背景色 */background-color: green;}
</style>

修改router.js文件

// 导入相关函数
import { createRouter, createWebHashHistory } from "vue-router";
//导入需要被路由控制的Home组件和About组件
import Home from "./components/Home.vue";
import About from "./components/About.vue";
import Tab1 from "./components/pages/Tab1.vue";
import Tab2 from "./components/pages/Tab2.vue";
//  子路由匹配规则,放入外部引入
const chilrou=[{path:'tab1',component:Tab1},{path:'tab2',component:Tab2},
]
//创建路由实例对象router
const router=createRouter({// 工作模式为Hash模式history:createWebHashHistory(),// 路由匹配规则routes:[// 路由重定向{path:'/',redirect:'/home'},//待匹配路径{path:'/home',component:Home},{path:'/about',component:About,// children属性,chilrou属性值children:chilrou//  子路由匹配规则,放入内部// children:[// 	{path:'tab1',component:Tab1},// 	{path:'tab2',component:Tab2},// ]},]
});
//导出路由实例对象
export default router;

运行效果:

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

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

相关文章

CSS3 max/min-content及fit-content、fill-available值的详解

c3中对width的值多了几个值&#xff1a;fill-available, max-content, min-content, 以及fit-content。 1.width:fill-available 我们在页面中扔一个没有其他样式的<div>元素&#xff0c;则&#xff0c;此时&#xff0c;该<div>元素的width表现就是fill-availabl…

杰理-701-更换字库

杰里-701-更换字库显示 工具&#xff1a;链接&#xff1a;https://pan.baidu.com/s/1yMDatiRCaJj2ioKXF-H8GQ 把使用的字库文件放进该目录下 生成后的字库文件需要修改名称 把修改好名称的字库文件放到该目录下替换 代码,把所有语言的PIX修改未新替换的字库文件&#xff08;保…

00_Qt概述以及如何创建一个QT新项目

Qt概述 1.Qt概述1.1 什么是Qt1.2 Qt的发展史1.3 支持的平台1.4 Qt版本1.5 Qt的下载与安装1.6 Qt的优点 2.QT新项目创建3.pro文件4.主函数5.代码命名规范和快捷键 1.Qt概述 1.1 什么是Qt Qt是一个跨平台的C图形用户界面应用程序框架。它为应用程序开发者提供建立艺术级图形界面…

机器人视觉软件实现目标检测通常借助深度学习技术和计算机视觉算法

机器人视觉软件实现目标检测通常借助深度学习技术和计算机视觉算法。以下是一般而言的目标检测实现步骤&#xff1a; 1、数据收集与标注&#xff1a;首先需要收集包含目标物体的大量图像数据&#xff0c;并对这些图像进行标注&#xff0c;标注出目标物体的位置和类别信息。这些…

字符串算法题(第二十四天)

344. 反转字符串 题目 编写一个函数&#xff0c;其作用是将输入的字符串反转过来。输入字符串以字符数组 s 的形式给出。 不要给另外的数组分配额外的空间&#xff0c;你必须**原地修改输入数组**、使用 O(1) 的额外空间解决这一问题。 示例 1&#xff1a; 输入&#xff1…

富 格 林:策划安全方案阻挠受害

富 格 林指出&#xff0c;现货黄金作为一种全球性的投资产品&#xff0c;以其独特的价值储存功能和风险对冲能力&#xff0c;成为了许多投资者的首选投资项目。但是&#xff0c;如何在这复杂的投资市场中阻挠受害实现安全交易成为了大家的难题。下面富 格 林将提供一些基本的做…

一篇安装配置ubuntu22.04(步骤详细,配置成功)

一篇配置ubuntu22.04(步骤详细&#xff0c;配置成功) 官网下载相应的镜像 vitualbox安装ubuntu 新建虚拟机 第一步 第二步 第三步、按需分配内存、处理器个数、磁盘大小 第四步、一直下一步直至完成 配置虚拟机网络 第一步、先停止虚拟机 第二步、设置虚拟机网络 正常启…

【C++】一篇文章带你深入了解vector

目录 一、vector的介绍二、 标准库中的vector2.1 vector的常见接口说明2.1.1 vector对象的常见构造2.1.1.1 [无参构造函数](https://legacy.cplusplus.com/reference/vector/vector/vector/)2.1.1.2 [有参构造函数&#xff08;构造并初始化n个val&#xff09;](https://legacy.…

深度学习torch+cuda+torchvison+torchaudio版本匹配

官网版本&#xff1a;https://pytorch.org/get-started/previous-versions/ 还是在官网找好&#xff0c;再安装下载&#xff0c;否则&#xff0c;费时费力。 torch-2.1.0cu121-cp38-cp38-win_amd64.whltorchvision0.16.0torchaudio2.1.0 torch-1.8.0cu111-cp38-cp38-win_amd64.…

Advanced RAG 03:运用 RAGAs 与 LlamaIndex 评估 RAG 应用

编者按&#xff1a;目前&#xff0c;检索增强生成&#xff08;Retrieval Augmented Generation&#xff0c;RAG&#xff09;技术已经广泛使用于各种大模型应用场景。然而&#xff0c;如何准确评估 RAG 系统的性能和效果&#xff0c;一直是业界和学界共同关注的重点问题。若无法…

NASA数据集——ACEPOL气溶胶对气候和空气质量的影响,测量气溶胶的化学成分、粒度分布、高度剖面和光学特性

ACEPOL_AircraftRemoteSensing_RSP_Data 简介 ACEPOL 研究扫描偏振计&#xff08;RSP&#xff09;遥感数据&#xff08;ACEPOL_AircraftRemoteSensing_RSP_Data&#xff09;是在 ACEPOL 期间由 ER-2 上的研究扫描偏振计&#xff08;RSP&#xff09;收集的遥感测量数据。为了更…

设计模式之状态模式(下)

3&#xff09;共享状态 1.概述 在某些情况下&#xff0c;多个环境对象可能需要共享同一个状态&#xff0c;如果希望在系统中实现多个环境对象共享一个或多个状态对象&#xff0c;那么需要将这些状态对象定义为环境类的静态成员对象。 2.案例 背景&#xff1a;要求两个开关对…

vue3支持markdown显示格式

背景 公司内部文档大模型体验&#xff0c;需要一个demo做展示&#xff08;做了好多demo了......&#xff09;&#xff0c;文档大模型的场景后台配置实体库、同义词、文档库等&#xff0c;其中文档库中有各种格式的文档&#xff0c;体验者让大模型写个脚本、以表格数据输出。页面…

helm介绍-部署helm私有仓库案例

helm介绍-部署helm私有仓库案例 helm介绍-部署helm私有仓库案例 在Kubernetes中部署容器云的应用也是一项有挑战性的工作&#xff0c;Helm就是为了简化在Kubernetes中安装部署容器云应用的一个客户端工具。通过helm能够帮助开发者定义、安装和升级Kubernetes中的容器云应用&a…

前端-vue项目debugger调试

一、前言 有的时候接受同事一个项目&#xff0c;用框架不一样&#xff0c;写的也不太规范&#xff0c;那么就需要打断点去学习改项目的流程了。 那么vue项目是如何debugger调试呢&#xff1f; 二、操作 大概理解一下&#xff0c;vue项目启动&#xff0c;大概是先启动框架&am…

手写前端控制并发任务

思路&#xff1a; 主要通过异步等待队列执行的原理。 当前执行的任务数达到最大值的时候&#xff0c;再继续执行的任务会放入等待队列里&#xff0c;直到当前任务执行结束后&#xff0c;减少一个当前任务数&#xff0c;并且判断队列中是否有任务&#xff0c;如果有则按顺序执…

高效进行文件夹批量改名,轻松实现英文到中文的翻译,让你的文件夹管理更高效!

在数字化时代&#xff0c;我们每天都在与无数的文件夹打交道。而管理这些文件夹&#xff0c;尤其是为它们命名&#xff0c;往往成为一项繁琐而耗时的任务。尤其是当文件夹名以英文命名时&#xff0c;对于非英语用户来说&#xff0c;理解和记忆都可能会成为一道难题。那么如何翻…

LeetCode 0924.尽量减少恶意软件的传播:连通块染色(以BFS为例)

【LetMeFly】924.尽量减少恶意软件的传播&#xff1a;连通块染色&#xff08;以BFS为例&#xff09; 力扣题目链接&#xff1a;https://leetcode.cn/problems/minimize-malware-spread/ 给出了一个由 n 个节点组成的网络&#xff0c;用 n n 个邻接矩阵图 graph 表示。在节点…

HarmonyOS4-数据持久化

轻量级preferences&#xff1a; 关系型数据库&#xff1a; 增删改&#xff1a; 查询语句&#xff1a; 具体详情代码可参与源码&#xff1a; 黑马大佬写的。 harmonyos-lessons: 黑马程序员B站HarmonyOS课程的基础篇代码部分

热门的软件测试趋势趋势分析

放眼全球&#xff0c;了解技术发展的边界和趋势&#xff0c;有助于组织和个人的发展及竞争力的提升&#xff0c;偶尔看到国外某网站的一篇文章&#xff0c;读来颇值得参考&#xff0c;简单翻译过来&#xff0c;分享一下。 也许这篇文章会给你一份指南&#xff0c;让你快速成长…