单页面应用的前端路由原理是什么？

前置知识

在了解单页面应用的前端路由原理之前，我们先了解下什么事单页面应用，什么是多页面应用，他们之间的区别又是什么？

什么是单页面应用？

单页面应用指的是第一次进入页面的时候会请求一个html文件，切换到其他组件的时候，虽然路径会发生相应的变化，但是没有新的html文件请求，原理是JS会感知到url的变化，然后js会动态的将当前页面的内容清除掉，然后将下一个页面的内容挂载到当前的页面上，这个时候的路由不是由后端做的而是由前端来做的，来判断页面到底显示哪个组件，这个过程就是单页面的应用。

单页面应用的优缺点

优点：页面切换快：因为页面每次切换的时候，并不需要做html文件的请求，这样就减少了很多http发送的时延。

缺点：单页面应用的首屏加载时间比较慢，首屏加载需要一次HTML请求和一次JS请求，时间相对较慢，而且SEO效果差，因为搜索引擎只认识HTML中的内容，但是单页应用中的内容很多需要靠JS渲染出来，搜索引擎不识别这部分内容，就会导致SEO效果不好。

什么是多页面应用？

多页面应用指的是每一次页面跳转的时候，服务器都会返回一个新的HTML文档，这种类型的应用叫做多页应用。

多页面应用的优缺点

优点：首屏加载快，SEO效果好。因为客户端向服务端发送请求的时候，服务端只返回了一个HTML页面，所以加载比较快。

缺点：页面切花比较慢。

单页面应用和多页面应用的区别

应用构成不同

多页面应用是由多个不同的页面构成，单页面应用是一个外壳页面和多个页面片段构成。

页面跳转方式不同

多页面应用的页面跳转是从一个页面跳转到另一个页面，而单页面则是把一个页面片段删除或隐藏，加载另一个页面片段。

跳转后公共资源是否重新加载

跳转后多页面应用是需要进行重新加载的，但是单页面不需要重新加载。

用户体验不同

多页面应用首屏加载快但是且缓慢，单页面应用首屏加载慢但是切换快。

页面传递数据方式不同

多页面应用依靠URL、Cookie、LocalStorage来传递数据，单页面应用则是靠组件进行通信，相对更加简单。

前端路由的原理

前端路由的原理本质上就是在不刷新浏览器的请求下修改URL、检测URL的变化，截获URL的地址，通过解析、匹配路由规则从而实现UI的更新。路由的实现通常有两种形式一种是Hash模式，一种是History模式。

Hash路由的原理

在Hash模式下，url中#后面的部分表示的是一个客户端状态，当这部分发生变化的时候，浏览器本身就不会刷新，这样就满足了第一个条件，即在不刷新浏览器的情况下修改浏览器链接，同时通过监听hashChange事件来监听URL中hash值的变化，触发相关函数，改变相关组件。

History路由的原理

History模式利用了HTML5中history的API,history.pushState和history.replaceState这两个方法可以在不刷新页面的情况下，操作浏览器的历史记录，这样也就满足了第一个条件，然后通过监听popState事件来剪影URL的变化，从而触发相关函数，改变相关组件。

单页面应用的前端路由原理是什么？相关推荐

单页面应用(SPA)前端路由hash 模式 VS history 模式
文章目录单页面应用(SPA) 前端路由的由来前端路由 hash 模式 history 模式 hash.history优缺点单页面应用(SPA) 简单的说 SPA 就是一个WEB项目只有一个 HT ...
浅谈前端路由原理hash和history
浅谈前端路由原理hash和history
html5页面图片切换,HTML5单页面手势滑屏切换原理
H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...
【前端路由原理--原生JS实现方式】--前后端路由的区别、关于单页面应用与多页面应用、什么是CSR、SSR、SSG、ISP
前言本来只是想学习 React-Router v6 ,没有想到,带出了这么多东西.前后端路由有什么区别?SPA与MPA的是什么?在了解到前端路之后又发现单页面于应用与多页面应用的不同之处,以及 .n ...
父页面监听iframe路由变化_前端路由原理
对于前端路由应该都很熟悉了,开发过spa应用的应该都用过,只是很少人去查一下前端路由实现的原理. 前端路由的实现核心问题有两个,一个是改变url不刷新,另一个是监听url变化.主要靠的就是hash和h ...
react router 级联路由_前端路由原理解析和实现
作者:@whinc链接:https://github.com/whinc/blog/issues/13 在单页应用如此流行的今天,曾经令人惊叹的前端路由已经成为各大框架的基础标配,每个框架都提供了强大 ...
令人惊叹的前端路由原理解析和实现方式
在单页应用如此流行的今天,曾经令人惊叹的前端路由已经成为各大框架的基础标配,每个框架都提供了强大的路由功能,导致路由实现变的复杂.想要搞懂路由内部实现还是有些困难的,但是如果只想了解路由实现基本原理还 ...
return view前端怎么获取_Web 前端路由原理解析和功能实现
↑ 点击上面 "时代Java"关注我们, 关注新技术,学习新知识! 什么是前端路由? 路由的概念来源于服务端,在服务端中路由描述的是 URL 与处理函数之间的映射关系. 在 Web ...
reactrouter监听路由变化_一篇文章搞懂前端路由原理解析和实现方式
在单页应用如此流行的今天,曾经令人惊叹的前端路由已经成为各大框架的基础标配,每个框架都提供了强大的路由功能,导致路由实现变的复杂. 想要搞懂路由内部实现还是有些困难的,但是如果只想了解路由实现基本原理 ...

单页面应用的前端路由原理是什么？

前置知识

什么是单页面应用？

单页面应用的优缺点

什么是多页面应用？

多页面应用的优缺点

单页面应用和多页面应用的区别

前端路由的原理

Hash路由的原理

History路由的原理

单页面应用的前端路由原理是什么？相关推荐

最新文章

热门文章