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;标注出目标物体的位置和类别信息。这些…

一篇安装配置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.…

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

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

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

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

前端-vue项目debugger调试

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

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

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

HarmonyOS4-数据持久化

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

C语言学习/复习20

一、调试 1.实例1&#xff1a; 经调试&#xff0c;该代码因数组越界会死循环 二、优秀的代码 注意事项&#xff1a;assert()返回真假并决定是否报错 常量指针本质是指针&#xff0c;常量修饰它&#xff0c;表示这个指针是一个指向常量的指针&#xff08;变量&#xff09…

MySQL 基础使用

文章目录 一、Navicat 工具链接 Mysql二、数据库的使用1.常用数据类型2. 建表 create3. 删表 drop4. insert 插入数据5. select 查询数据6. update 修改数据7. delete 删除记录truncate table 删除数据 三、字段约束字段1. 主键 自增delete和truncate自增长字段的影响 2. 非空…

Tomcat 获取客户端真实IP X-Forwarded-For

Tomcat 获取客户端真实IP X-Forwarded-For 代码实现&#xff1a; 在Host标签下面添加代码&#xff1a; <Valve className"org.apache.catalina.valves.RemoteIpValve" remoteIpHeader"x-forwarded-for" remoteIpProxiesHeader"x-forwarded-by&q…

Linux命令学习—Iptables 防火墙(上)

1.1、防火墙 1、防火墙的定义 所谓防火墙指的是一个由软件和硬件设备组合而成、在内部网和外部网之间、专用网与公共网之间的界面上 构造的保护屏障.是一种获取安全性方法的形象说法&#xff0c;它是一种计算机硬件和软件的结合&#xff0c;使 Internet 与 Intranet 之间建立起…

大功率Boost升压电路实例设计

项目介绍及参数要求 指标参数光伏额定功率: 4000W光伏最大输入电压: 350V光伏最小输入电压: 150V母线电压(Boost电路输出电压): 600V电流纹波率

野生动物保护视频AI智能监管方案,撑起智能保护伞,守护野生动物

一、背景 在当今世界&#xff0c;野生动物保护已经成为全球性的重要议题。然而&#xff0c;由于野生动物生存环境的不断恶化以及非法狩猎等活动的盛行&#xff0c;保护野生动物变得尤为迫切。为了更有效地保护野生动物&#xff0c;利用视频智能监管技术成为一种可行的方案。 …

Java springboot使用EasyExcel读Excel文件,映射不到属性值,对象属性值都是null

如果你的类上有这个注解&#xff0c;去掉火或注释掉就可以了 Accessors(chain true)解决方法

IO流高级流

前言 缓冲区能够提升输入输出的效率 虽然FileReader和FileWriter中也有缓冲区 但是BufferedReader和BufferWriter有两个非常好用的方法. 缓冲流 字节缓冲流 import java.io.*;public class BufferedStreamDemo {public static void main(String[] args) throws IOExceptio…