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

前端路由原理

概述

在Web前端单页面中,路由描述的是URL和UI的映射关系,通过监听URL的变化,然后匹配路由规则,显示相应的页面,并且无需刷新页面,但让这种映射方式是单项的,通过URL变化引起了UI的变化。

如何实现前端路由?

我们先来学习下前端路由实现的两种方式: HashHistory,这两种方式各有其优势和局限。

Hash模式(默认方式)

hash是URL中 (#)及后面的那部分,www.test.com/#/ 就是Hash URL,当# 后面的哈希值发生变化时,可以通过 hashchange 事件来监听到URL的变化,从而跳转对应的页面,常用作瞄点在页面内进行导航,改变URL中的Hash部分不会引起页面刷新,并且无论哈希值如何变化,服务端接收到的URL请求永远是www.test.com。另外Hash模式的兼容性也更好。

foo://example.com:8042/over/there?name=ferret#nose\_/   \______________/\_________/ \_________/ \__/|           |            |            |        |
scheme    authority       path        query   fragment

History模式

History 模式是HTML5新推出的功能,主要通过 pushStatereplaceState两个方法改变URL的path部分不会引起页面刷新,只会更新浏览器的历史记录。

//新增历史记录
history.pushState(stateObject,title,URL)
//替换当前历史记录
history.replaceState(stateObject,title,URL)

另外History提供了类似hashchangepopstate事件,但与之不同的是:我们需要通过点击浏览器的前进后退按钮时会触发popstate 事件,通过pushState/replaceState<a> 标签改变URL不会触发popstate事件。但我们可以通过拦截pushState/replaceState的调用和<a> 标签的点击事件来监测URL变化,所以我们也可以通过这样的方式监听URL的变化,只是没有了hashchange事件那么便利,History的兼容性相比较于Hash又要差一些。
在这里插入图片描述

Hash和History对比

☀️ Hash只可以更改 # 后面的内容,History模式可以通过API设置任意的同源URL。
☀️History 模式可以通过API添加任意类型的数据到历史记录中,Hash模式只能更改哈希值,也就是字符串。
☀️Hash模式无需后端配置,并且兼容性好。History模式在用户手动输入地址或者刷新页面时会发起URL请求,后端需要配置 index.html 页面用于匹配不到静态资源的时候。

今天的分享就到这里啦,感谢大家的阅览,小江会一直与大家一起努力,文章中如有不足之处,你的支持是我前进的最大动力,请多多指教,感谢支持,持续更新中 ……


http://www.mrgr.cn/news/51123.html

相关文章:

  • ai抠图怎么抠出来?5招小白秒懂的抠图方法,请收藏
  • 更新yarn之后整个项目运行不起来
  • 互助学习小程序的设计与实现springboot+论文源码调试讲解
  • 【C++刷题】力扣-#121-买卖股票的最佳时机
  • 字体test
  • 设计师吃不准客户需求,那就多给客户发案例吧,看图说需求。
  • WPF实现类似网易云音乐的菜单切换
  • pikachu靶场CSRF-get测试报告
  • L1练习-鸢尾花数据集处理(分类/聚类)
  • U盘装系统,使用U盘启动,提示需要装驱动
  • Fork 和 Pull Request 的流程
  • Redis 数据类型HyperLogLogs(基数统计)
  • Centos7安装ZLMediaKit
  • 物联网安全新挑战:等保测评在智能设备中的应用
  • 掌握Go语言`runtime`包:性能优化与实战指南
  • Python知识点:基于Python技术,如何使用PyCryptodome进行加密操作
  • 【QAMISRA】解决导入commands.json时报错问题
  • 安装Docker、切换镜像源以及拉取镜像示例
  • Java基础:面向对象编程6
  • Python连接Oracle