单页面应用(SPA)&&前端路由hash 模式 VS history 模式

最新推荐文章于 2023-03-02 09:11:00 发布
最新推荐文章于 2023-03-02 09:11:00 发布
阅读量1.4k 收藏 10
点赞数 4
分类专栏： html&浏览器 文章标签： 前端 路由 hash history html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39903567/article/details/116228109
版权
本文探讨了单页面应用(SPA)的前端路由，解释了前端路由产生的原因，如提高交互体验和解决SEO问题。介绍了hash模式和history模式，包括各自的工作原理、使用到的API，并分析了它们的优缺点。hash模式具有较好的兼容性，但可能导致锚点功能失效，而history模式提供更美观的URL，对SEO友好，但需要服务端支持。
摘要由CSDN通过智能技术生成

文章目录

单页面应用(SPA)

简单的说 SPA 就是一个WEB项目只有一个 HTML 页面，一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转。 取而代之的是利用 JS 动态的变换 HTML 的内容，从而来模拟多个视图间跳转。

前端路由的由来

最开始的网页是多页面的在不同的HTML 页面间跳转，直到 Ajax 的出现，才慢慢有了 SPA。

SPA 的出现大大提高了 WEB 应用的交互体验。在与用户的交互过程中，不再需要重新刷新页面，获取数据也是通过 Ajax 异步获取，页面显示变的更加流畅。

但由于 SPA 中用户的交互是通过 JS 改变 HTML 内容来实现的，页面本身的 url 并没有变化，这导致了两个问题：

  1. SPA 无法记住用户的操作记录，无论是刷新、前进还是后退，都无法展示用户真实的期望内容。
  2. SPA 中虽然由于业务的不同会有多种页面展示形式，但只有一个 url，对 SEO 不友好，不方便搜索引擎进行收录。

前端路由就是为了解决上述问题而出现的。

前端路由

简单的说，就是在保证只有一个 HTML 页面，且与用户交互时不刷新和跳转页面的同时，为 SPA 中的每个视图展示形式匹配一个特殊的 url。在刷新、前进、后退和SEO时均通过这个特殊的 url 来实现。

为实现这一目标，我们需要做到以下二点：

  1. 改变 url 且不让浏览器像服务器发送请求。
  2. 可以监听到 url 的变化

前端路由有 hash 模式和 history 模式

最低0.47元/天 解锁文章
LYFlied
关注
专栏目录
Vue之路由（SPA开发模式）
m0_52681702的博客
11-02 1130
一、什么是SPA 单页Web应用（single page application，SPA），就是只有一个Web页面的应用， 是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序 单页面应用程序： 只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取 的数据, 展示在页面中 传统多页面应用程序： 对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面 优势；...
Vue 学习(九、SPA-单页面应用 与 前端路由)
shuux666的博客
02-23 419
文章目录 一、前后端架构 1. 服务器生成页面 2. 前后端分离 3. 单页面应用 - SPA 二、路由 1. 服务器端路由 2. 前端路由 3. 结语 一、前后端架构 常见的前后端架构有 服务器生成页面、前后端分离、单页面应用三种，它们有着各自的特点，可以根据实际需求选 择不同的前后端架构方式 1. 服务器生成页面 服务器生成页面架构的 请求-响应 流程图： 这是比较早期的架构方式，通过浏览器向服务器发送一个请求，服务器找到与请求匹配的 JSP 文件，然后执行文件 内部的业务逻辑，最
主流的spa应用的路由的哈希和history模式
l908825925的博客
02-28 840
现在的主流应用比如vue和react构建的spa应用的访问地址都具有2种模式，一种是哈希模式，一种是history模式。history模式是基于h5的history对象去进行操作，两者有什么不同呢？ 首先说history模式。history模式需要服务端（比如nginx）将所有的代理路由请求均打到index.html页面上，因为spa的路由是前端去进行管理的，所以后端对路由无需任何操作。但是我需要...
原生JS简单的实现单页面Hash路由
zshsats博客
03-14 1095
(function(global) { function Router(){ this.before = null; //切换前 this.after = null; // 切换后 this.routes=[]; this.redirectRoute=""; ...
HTML5——history实现单页面
zyz00000000的博客
09-19 2676
1. 单页Web应用（single page web application，SPA） history.back()：URL回退一次 history.forward()：URL前进一次 history.go(n)：URL几次history.back()或几次history.forward()，比如：history.go(2)：两次history.forward()；history.go(-2...
SPA中的hash和history
weixin_42854769的博客
04-22 355
一、hash 和 history SPA 即单页面应用，路由改变时不需要重新刷新整个浏览器标签页，为了满足这一需求就需要使用 hash 或 history 模式，目前 Vue、React、Angular 都支持这两种模式。 hash url 中会带有 # 号，# 号后的路由改变不会重新加载页面，但会记录在 window.hisotry 中，因此可以使用 history.back() 等方法，监听则通过 window.onhashchange() 方法。 history hisroty：利用 history.
详解vue 单页应用（spa）前端路由实现原理
12-11
history是实现SPA前端路由是一种主流方法，它有几个原始方法： history.back() – 与在浏览器点击后退按钮相同 history.forward() – 与在浏览器中点击按钮向前相同 history.go(n) – 接受一个整数作
Vue-router 中hash模式和history模式的区别
12-10
对于vue这类渐进式前端开发框架，为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。 为了达到这一目的，...
SPA的两种实现方式（hash 及 history API）
qq_18369669的博客
06-10 1218
前端路由、SPA的两种实现方式：hash 和 history API 代码及图示
hash模式 vs history模式
weixin_41293999的博客
06-18 238
hash模式 hash 就是指 url 尾巴后的 # 号以及后面的字符。 hash 模式背后的原理是onhashchange事件。 hash 值变化不会导致浏览器向服务器发出请求，而且 hash 改变会触发 hashchange 事件 // 设置 url 的 hash，会在当前url后加上 '#test' window.location.hash = 'test' // '#test' var hash = window.location.hash // 监听hash变化，点击浏览器的前进后退
路由的hash模式和history模式
最新发布
m0_70858457的博客
03-02 736
路由的模式
history查看历史操作记录，并显示操作时间
热门推荐
Silence Ray的博客
03-23 2万+
在查看历史的操作记录有两种方式 1.在用户的目录下的.bash_history文件中 [root@node1 ~]# vi ~/.bash_history reboot vi /etc/sysconfig/network-scripts/ifcfg-eth0 setup service netwok restart service network restart ping 192.168.11
Vue路由中，history和hash两种模式有什么区别？
zz130428的博客
01-19 3579
浏览器在刷新的时候，会按照路径发送真实的资源请求，如果这个路径是前端通过 history API 设置的 URL，那么在服务端往往不存在这个资源，于是就返回 404 了。因此在线上部署基于 history API 的单页面应用的时候，一定要后端配合支持才行，否则会出现大量的 404。history API 是 H5 提供的新特性，允许开发者直接更改前端路由，即更新浏览器 URL 地址而不重新发起请求。当做视图渲染容器，当切换路由的时候触发视图容器的更新，这其实就是大多数前端框架哈希路由的实现原理。
Vue-cli开发一时爽，却如何面对SEO需求，列举几种常见的模式
qazxbjp2010的博客
08-14 272
很久没有上博客了，最近决定还是重新开始更新。之前公司的项目中有很多SEO的要求，之前对SEO这块了解的也不是很多，后来也看了很多SEO相关的知识。因为公司的web还是传统套模板的开发模式，SEO方面的各种变态要求都可以实现，但有很多小活动页面我都是用Vue去实现的，还好这些活动都不需要SEO，为了以后着想，我还是决定要研究一下。 1.可以满足简单的SEO要求的，prerender-spa-plu...
hash模式和history模式 实现原理及区别
林夏天的博客
05-14 1万+
目前单页应用（SPA）越来越成为前端主流，单页应用一大特点就是使用前端路由，由前端来直接控制路由跳转逻辑，而不再由后端人员控制，这给了前端更多的自由。 目前前端路由主要有两种实现方式：hash 模式和 history模式，下面分别详细说明。 1. hash模式 比如在用超链接制作锚点跳转的时候，就会发现，url后面跟了"#id"，hash值就是url中从"#"号开始到结束的部分。 hash值变化浏览器不会重新发起请求，但是会触发window.hashChange事件，假如我们在hashChange事件中获取
hash解决冲突的方法优缺点
ldw662523的博客
03-15 7457
hash表解决冲突的方法： 1.开放定址法 1.1 线性探测法 1.2 二次探测法 1.3 随机探测法 2.链地址法 3.公共溢出区法 这种方法需要两个表，分别是基本表、溢出表 链地址法的优点 与开放定址法相比，拉链法有如下几个优点： ①链地址法处理冲突简单，且无堆积现象，即非同义词决不会发生冲突，因此平均查找长度较短； ②由于链地址法中各链表...
前端路由原理？两种实现方式有什么区别？
LuckXinXin的博客
12-04 1020
前端路由实现起来其实很简单，本质就是监听 URL 的变化，然后匹配路由规则，显示相应的页面，并且无须刷新页面。目前前端使用的路由就只有两种实现方式 Hash 模式 History 模式 Hash 模式 www.test.com/#/ 就是 Hash URL，当 # 后面的哈希值发生变化时，可以通过 hashchange 事件来监听到 URL 的变化，从而进行跳转页面，并且无论哈希值如何变化，服务端接收到的 URL 请求永远是 www.test.com window.addEventListene.
Vue路由的hash模式与history模式原理区别及优缺点
qq_57334853的博客
07-15 4145
今天说说Vue路由的hash模式与history模式的区别，这个也是面试常问的问题。 总结 传统的路由指的是：当用户访问一个url时，对应的服务器会接收这个请求，然后解析url中的路径，从而执行对应的处理逻辑。这样就完成了一次路由分发。 前端路由是不涉及服务器的，是前端利用hash或者HTML5的 关于Vue路由、一个单页面应用可以做到多路由跳转并按需加载页面代码，这样的方式就很神奇，以往的做法都是通过锚点来定位对应的页面代码，而这种古老的方式存在最大的缺陷就是首屏加载缓慢，一次性加载了所有页面代码。...
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值