前端路由的介绍

前端路由

是用于实现页面间导航的一种技术,在不重新加载整个页面的情况下,通过改变地址栏的URL来更新内容。前端路由通常用于单页应用中,为用户提供更流畅的体验。

前端路由的工作原理

主要依赖于浏览器的History API(popstate, pushState, replaceState 三个事件)和url 的哈希部分(window.location.hash)来实现监听URL的变化, 根据url的变化来加载相应的视图和组件。

前端的路由主要分为两种

哈希路由

哈希路由的地址栏带有#, 以此可以判断一个路由是否属于哈希路由。哈希路由是通过hashchange 来监听地址栏的变化,来加载相应的视图和组件


history 路由

history 路由 是通过popstate来监听路由的变化。history 路由每刷新一次页面的时候,都会发送一个get请求,而hash路由刷新页面的时候,不会发送请求。

路由方式
 静态路由

静态路由是指URL和页面内容之间的映射关系在编译时就已经确定,不会在运行时改变。每个URL对应一个固定的页面或组件。
静态路由通常用于那些页面内容固定不变的场景。
在静态路由中,每个URL都直接映射到一个特定的页面或组件,这些页面或组件在服务器上已经准备好,并且在用户访问这些URL时直接返回。
    eg:博客网站,每个博客文章都有一个固定的URL
    https://web-hls.blog.csdn.net/article/details/123697104
    https://web-hls.blog.csdn.net/article/details/139579472
    https://web-hls.blog.csdn.net/article/details/139047421


 动态路由

 动态路由是指URL和页面内容之间的映射关系在运行时动态确定。通常,动态路由会包含一个或多个参数,这些参数用于从数据库或API中获取数据,并动态生成页面内容。
    eg: 一个电子商务网站,用户可以浏览不同类别的商品,URL可能看起来像这样。
    https://example.com/products/shoes
    https://example.com/products/clothes
    https://example.com/products/electronics

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

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

相关文章

什么是相对路径?什么是绝对路径?打包时路径怎么搞?

简单点说: 绝对路径:绝对路径是一个完整的路径,从根目录开始一直到目标文件或目录的路径。通常我们直接使用"/ "代表从根目录开始的目录路径。它提供了文件或目录在文件系统中的确切位置,与当前工作目录无关。绝对路径…

AMS深入浅出

目标: 1. 一、AMS启动流程 ActivityManagerService是 安卓10 以后,将AMS拆分出ActivityTaskManagerService。 1.1 启动入口 AMS是由SystemServer进程启动,在启动过程 startBootStripService,会启动AMS和ATMS服务。 SystemSe…

外卖跑腿APP开发指南:探索同城O2O系统源码技术要点

同城O2O系统作为这类服务的技术支撑平台,承载了外卖跑腿APP的开发与运行。本篇文章,小编将深入探讨同城O2O系统源码的技术要点,为外卖跑腿APP的开发提供指导与参考。 一、同城O2O系统概述 同城O2O系统是一种基于地理位置的线上到线下服务平台…

“论多源数据集成及应用”必过范文,突击2024软考高项论文

论文真题 在如今信息爆炸的时代,企业、组织和个人面临着大量的数据。这些数据来自不同的渠道和资源,包括传感器、社交媒体、销售记录等,它们各自具有不同的数据格式、分布和存储方式。因此如何收集、整理和清洗数据,以建立一个一…

阅读源码解析dynamic-datasource-spring-boot-starter中是如何动态切换数据源的

dynamic-datasource-spring-boot-starter是苞米豆提供的一个动态切换数据源的工具,可以帮助企业或者个人实现多数据源的切换,这里通过阅读源码的方式解析是如何动态的切换数据源的,采用的版本是3.5.1 源码解析 通过官方文档可以看到&#x…

vue 和 js写屏幕自适应

实现屏幕自适应的方式有很多种,可以通过插件本身提供的方法,可以通过flex布局等,今天我们来写写通过js实现屏幕自适应。 以下是在vue中实现的屏幕自适应 首先在data中定义一下屏幕的默认大小和缩放比例 然后在mounted中获取窗口的内置宽高&a…

揭秘软件测试秘籍:测试用例设计方法大揭秘

文章目录 引言一、等价类划分1.1 定义1.2 步骤1.3 等价类划分优点和缺点 二、边界值分析法2.1 定义2.2 步骤2.3 边界值分析法的优点和缺点 三、判定表法3.1 定义3.2 步骤3.3 判定表组成不分3.4 判定表的优点和缺点 四、正交实验法4.1 定义4.2 步骤4.3 正交实验法的优点和缺点 五…

2024.05.31 校招 实习 内推 面经

绿*泡*泡VX: neituijunsir 交流*裙 ,内推/实习/校招汇总表格 1、实习 | 上汽集团零束科技2024「ZONE引擎」(内推) 实习 | 上汽集团零束科技2024「ZONE引擎」计划正式启动(内推) 2、实习 | 华为上海海思…

基于Verilog表达的FSM状态机

基于Verilog表达的FSM状态机 1 FSM1.1 Intro1.2 Why FSM?1.3 How to do 在这里聚焦基于Verilog的三段式状态机编程; 1 FSM 1.1 Intro 状态机是一种代码实现功能的范式;一切皆可状态机; 状态机编程四要素:– 1.状态State&#…

基于51单片机的简易温控水杯恒温杯仿真设计( proteus仿真+程序+设计报告+讲解视频)

基于51单片机的简易温控水杯恒温杯仿真设计( proteus仿真程序设计报告讲解视频) 仿真图proteus7.8及以上 程序编译器:keil 4/keil 5 编程语言:C语言 设计编号:S0099 1. 主要功能: 基于51单片机的简易温控水杯恒温…

Hudi extraMetadata 研究总结

前言 研究总结 Hudi extraMetadata ,记录研究过程。主要目的是通过 extraMetadata 保存 source 表的 commitTime (checkpoint), 来实现增量读Hudi表写Hudi表时,保存增量读状态的事务性,实现类似于流任务中的 exactly-once 背景需求 有个需求:增量读Hudi表关联其他Hudi…

cuda 架构设置

import torch torch.cuda.get_device_capability(0) 添加cmake options: -DCMAKE_CUDA_ARCHITECTURES86 -DCMAKE_CUDA_COMPILER/usr/local/cuda-11.8/bin/nvcc cmake工程出现“CMAKE_CUDA_ARCHITECTURES must be non-empty if set.“的解决方法_failed to detec…

振动棒出口欧盟CE认证测试项目介绍

振动棒出口欧盟CE认证测试项目介绍 一、CE认证概述 CE认证是欧盟市场的一种强制性认证,主要用于确保产品符合欧盟内的基本安全、健康和环保要求。对于许多产品,特别是电子电气产品,CE标志是进入欧盟市场的必要条件。振动棒作为成人用品&…

【附带源码】机械臂MoveIt2极简教程(六)、第三个demo -机械臂的避障规划

系列文章目录 【附带源码】机械臂MoveIt2极简教程(一)、moveit2安装 【附带源码】机械臂MoveIt2极简教程(二)、move_group交互 【附带源码】机械臂MoveIt2极简教程(三)、URDF/SRDF介绍 【附带源码】机械臂MoveIt2极简教程(四)、第一个入门demo 【附带源码】机械臂Move…

中介子方程十四

X$XFX$XEXyXαXiX$XαXiXrXkXtXyX$XpXVX$XdXuXWXαXWXuXdX$XVXpX$XyXtXkXrXiXαX$XiXαXyXEX$XFX$XEXyXαXiX$XαXiXrXkXtXyX$XpXVX$XdXuXWXαXWXuXdX$XVXpX$XyXtXkXrXiXαX$XiXαXyXEX$XαXηXtXαX$XWXyX$XyXWX$XpXαXqXηX$XeXαXhX$XdX$XpX$XdX$XyXeXαX$XEXyXαXiX$XαXiX…

Java 获取客户端 IP 地址【工具类】

Java 获取客户端 IP 地址 import javax.servlet.http.HttpServletRequest; import java.net.InetAddress;/*** 网络工具类*/ public class NetUtils {/*** 获取客户端 IP 地址** param request 请求* return {link String}*/public static String getIpAddress(HttpServletReq…

Apache Flink 如何保证 Exactly-Once 语义

一、引言 在大数据处理中,数据的一致性和准确性是至关重要的。Apache Flink 是一个流处理和批处理的开源平台,它提供了丰富的语义保证,其中之一就是 Exactly-Once 语义。Exactly-Once 语义确保每个事件或记录只被处理一次,即使在…

源码编译构建LAMP

Apache 起源 源于A Patchy Server,著名的开源Web服务软件1995年时,发布Apache服务程序的1.0版本由Apache软件基金会(ASF)负责维护最新的名称为“Apache HTTP Server”官方站点:http://httpd.apache.org/ 主要特点 开发源代码/…

Mysql union语句

开源项目SDK:https://github.com/mingyang66/spring-parent 个人文档:https://mingyang66.github.io/raccoon-docs/#/ mysql union操作符用于连接两个以上的select语句的结果组合到一个结果集,并去除重复的行,每个select语句的雷叔…

com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException异常问题如何解决?

com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: SELECT command denied to user XXXXXXX for table sys_users这是一个 MySQL 权限问题,表示用户 “XXXXXX” 没有对表 “sys_users” 执行 SELECT 操作的权限。 解决方案: 检查用户权限&am…