前端基础--前端路由

Moriarty123666

于 2021-11-29 00:29:43 发布

阅读量712

点赞数

分类专栏：前端基础文章标签： css javascript html5

本文链接：https://blog.csdn.net/Moriarty123666/article/details/121600713

版权

前端基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

前端路由

一、由来
1、路由这个概念来源于后端，在SSR（Server Side Render，服务端渲染）的时候，界面渲染的过程是这样的：
（1）浏览器发出请求
（2）服务器监听到 80 端口（或 443）有请求过来，并解析 url 路径
（3）根据服务器的路由配置，返回相应信息（可以是 html 字串，也可以是 json 数据，图片等）
（4）浏览器根据数据包的Content-Type来决定如何解析数据

2 、Ajax（异步JavaScript和XML）的出现，使界面不用频繁刷新，随着技术的发展，简单的异步已经不能满足需求，所以异步的更高级体验出现了——SPA(单页应用)。由于 SPA 中用户的交互是通过 JS 改变 HTML 内容来实现的，页面本身的 url 并没有变化，这导致了两个问题：
（1）SPA 无法记住用户的操作记录，无论是刷新、前进还是后退，都无法展示用户真实的期望内容。
（2）SPA 中虽然由于业务的不同会有多种页面展示形式，但只有一个 url，对 SEO 不友好，不方便搜索引擎进行收录。

二、类型
1、前端路由分为HashRouter和 HistoryRouter
2、原理：
（1）HashRouter：通过window.onhashchange方法获取新URL中hash值，获取的值是location.hash, 再做进一步处理
在这里插入图片描述

（2）HistoryRouter：通过history.pushState 使用它做页面跳转不会触发页面刷新，使用window.onpopstate 监听浏览器的前进和后退，再做其他处理
3.区别：
（1）history和hash都是利用浏览器的两种特性实现前端路由，history是利用浏览历史记录栈的API实现，hash是监听location对象hash值变化事件来实现
（2）history的url没有’#'号，hash反之，hash模式下url会带有#，需要url更优雅时，可以使用history模式。
（3）相同的url，history会触发添加到浏览器历史记录栈中，hash不会触发，history需要后端配合，如果后端不配合刷新新页面会出现404，hash不需要。
（4）需要兼容低版本的浏览器时，建议使用hash模式。需要添加任意类型数据到记录时，可以使用history模式。