前端路由的前世今生

最新推荐文章于 2022-07-07 23:35:00 发布

一头浓密的黑发

最新推荐文章于 2022-07-07 23:35:00 发布

阅读量333

点赞数

分类专栏：项目小技巧文章标签：前端路由 hash history f5刷新404 路由模式

本文链接：https://blog.csdn.net/weixin_45283768/article/details/103496094

版权

项目小技巧专栏收录该内容

20 篇文章 0 订阅

订阅专栏

初识路由
　　首先要了解的一点就是路由是由多个URL组成的，使用不同的URL可以相应的导航到不同的位置。在传统的多页面应用中，网站的每一个 URL 地址都是对应于服务器磁盘上的一个实际物理文件。例如，当我们访问 https://www.yousite.com/index.html 这个网址的时候，服务器会自动把我们的请求对应到当前站点路径下面的 index.html 文件，然后再给予响应，将这个文件返回给浏览器。当我们跳转到别的页面上时，毫无疑问则会再重复一遍上面的过程。因为浏览器对页面的访问是无状态的，所以我们在切换不同的页面时都会重新进行请求。

　　而实际使用vue和vue-router开发就会明白，在切换页面时是没有重新进行请求的，使用起来就好像页面是有状态的，这是什么原因呢？因为在单页面应用中，整个项目中只会存在一个 html 文件，当用户切换页面时，只是通过对这个唯一的 html 文件进行动态重写，从而达到响应用户的请求。也就是说，从切换页面这个角度上说，应用只是在第一次打开时请求了服务器（非服务端渲染的单页应用）。因为访问的页面是并不真实存在的，所以如何正确的在一个 html 文件中展现出用户想要访问的信息就成为单页面应用需要考虑的问题，而对于这一路由问题的解决方案，为了与我们后端传统意义上的路由进行区别，就将此称为前端路由——其核心是改变视图的同时不会向后端发出请求。

什么是单页面应用(SPA)
　　首先我们需要了解一下——SPA(单页面应用)。互联网是一步一步发展到今天的，用一个普通用户能够觉察到的衡量因素——上网速度。由一开始的拨号上网，到宽带上网，再到如今的百兆光纤等等。而对于web应用，也朝着内容更加丰富，上网更加便捷，浏览更加快速的方向发展，传统的一个页面映射一个.html，.css，.js的模式，也逐渐有了自己的弊端，那就是切换页面需要从服务器下载对应的html、css和js文件，而这些文件大小并不算小，这就造成了页面加载速度的缓慢，从而影响了用户体验。在这个快节奏的时代，大家都在追求更快，更顺滑。所以，一个新的模式出来了，那就是组件化。组件化模式缩小了文件的颗粒度，把不同的逻辑视图块分割为小的独立的组件，将不同页面视为组件的不同排列组合，html作为包裹这件组合后的组件的容器。整个页面，只有一个html。当页面切换时，url 发生改变，只是表明页面组件排列组合的方式变了，并不需要向后端发送请求重载页面，这样的应用也就叫做单页面应用，因为只有一个html文件。

前端路由造成的矛盾
　　前端路由是不同的url对应不同的组件排列组合方式，但是浏览器并不知道运行的是SPA，他还默认为是传统的web应用——不同页面对应不同html。所以当你的url改变时，浏览器依然会向新的url发起请求，但这是我们不希望浏览器做的。我们想要的是改变路由的同时不会向后端发出请求(前端路由)。

路由模式
实际上存在三种模式：
       Hash: 使用URL的hash值来作为路由。支持所有浏览器。
       History: 以来HTML5 History API 和服务器配置。参考官网中HTML5 History模式。
       Abstract: 支持所有javascript运行模式。如果发现没有浏览器的API，路由会自动强制进入这个模式。
vue-router中默认使用的是hash模式，也就是会出现URL中带有#号，比如：

在这里插入图片描述

我们可以用如下代码修改成history模式：

在这里插入图片描述

添加一个mode属性就能将模式转换。

hash模式

hash —— 即地址栏 URL 的 # 符号（此 hash 不是密码学里的散列运算）。
- #是什么？
  # 俗称锚点，做页面定位。其右边的字符，就是网页中该位置的标识符。比如，
  http://www.example.com/index.html/#/print 就代表网页 index.html 的 print 位置。浏览器读取这个 url 后，
  会自动将 print 位置滚动至可视区域。
- 如何设置#？
  为网页位置指定标识符，有两个方法。一是使用锚点，比如<a name="print"></a>，二是使用id属性，
  比如 <div id="print">。
- #的特点
  比如这个 URL：http://www.jianshu.com/#/article，hash 的值为 #/article。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。
- 如何读取#？
  使用 window.location.hash 读取 # 值。这个属性可读可写。读取时，可以用来判断网页状态是否改变；
  写入时，则会在不重载网页的前提下，创造一条访问历史记录。
  每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用"后退"按钮，就可以回到上一个位
  置。这对于ajax应用程序特别有用，可以用不同的#值，表示不同的访问状态，然后向用户给出可以访问某
  个状态的链接。值得注意的是，上述规则对IE 6和IE 7不成立，它们不会因为#的改变而增加历史记录。

hash模式背后的原理是onhashchange事件，可以在window对象上监听这个事件：

window.onhashchange = function(event){
    console.log(event.oldURL, event.newURL);
    let hash = location.hash.slice(1);
    document.body.style.color = hash;
}

上面的代码可以通过改变hash来改变页面字体颜色，虽然没什么用，但是一定程度上说明了原理。
更关键的一点是，因为hash发生变化的url都会被浏览器记录下来，从而你会发现浏览器的前进后退都可以用了，同时点击后退时，页面字体颜色也会发生变化。这样一来，尽管浏览器没有请求服务器，但是页面状态和url一一关联起来，后来人们给它起了一个霸气的名字叫**前端路由，成为了单页应用标配**。
我们写个简单的方法来测试一下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>测试一下</div>
    <script type="text/javascript">
        window.onhashchange = function(event){
            console.log(event.oldURL,event.newURL)
            let hash = location.hash.slice(1);
            document.body.style.color = hash;
        }
    </script>
</body>
</html>

在这里插入图片描述
并且通过浏览器的前进、后退页面均可以变化。
网易云音乐，百度网盘就采用了hash路由，看起来就是这个样子:
http://music.163.com/#/friend
https://pan.baidu.com/disk/home#list/vmode=list

history模式

随着history api的到来，前端路由开始进化了，前面的hashchange，只能改变#后面的url片段，而history api则给了前端完全的自由。
history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 popState() 方法。（需要特定浏览器支持这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

history api可以分为两大部分：切换和修改

切换历史状态

包括back、forward、go三个方法，对应浏览器的前进，后退，跳转操作：

history.go(-2);//后退两次
history.go(2);//前进两次
history.back(); //后退
hsitory.forward(); //前进

修改历史状态

包括了pushState、replaceState两个方法，这两个方法接收三个参数：stateObj，title，url

history.pushState({color:'red'}, 'red', 'red')

window.onpopstate = function(event){
    console.log(event.state)
    if(event.state && event.state.color === 'red'){
        document.body.style.color = 'red';
    }
}

history.back();

history.forward();

通过pushstate把页面的状态保存在state对象中，当页面的url再变回这个url时，可以通过event.state取到这个state对象，从而可以对页面状态进行还原，这里的页面状态就是页面字体颜色，其实滚动条的位置，阅读进度，组件的开关的这些页面状态都可以存储到state的里面。
通过history api，我们丢掉了丑陋的#，但是它也有个毛病：
不怕前进，不怕后退，就怕刷新f5（如果后端没有准备的话），因为刷新是实实在在地去请求服务器的。
　　在hash模式下，前端路由修改的是**#中的信息**，而浏览器请求时是不会带上#后的内容，所以没有问题。但是在history下，你可以自由的修改path，当刷新时，如果服务器中没有相应的响应或者资源，会分分钟刷出一个404来。

hash 和 history的使用场景

一般场景下，hash 和 history 都可以，除非你更在意颜值， # 符号夹杂在 URL 里看起来确实有些丑陋。

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成
URL 跳转而无须重新加载页面。—— Vue-router 官网。

另外，根据 Mozilla Develop Network 的介绍，调用 history.pushState() 相比于直接修改 hash，存在以下优势：

pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL；而 hash 只可修改 # 后面的部分，因此只能设置与当前 URL 同文档的 URL；
pushState() 设置的新 URL 可以与当前 URL 一模一样，这样也会把记录添加到栈中；而 hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中；
pushState() 通过 stateObject 参数可以添加任意类型的数据到记录中；而 hash 只可添加短字符串；
pushState() 可额外设置 title 属性供后续使用。

当然啦，history 也不是样样都好。SPA 虽然在浏览器里游刃有余，但真要通过 URL 向后端发起 HTTP 请求时，两者的差异就来了。尤其在用户手动输入 URL 后回车，或者刷新（重启）浏览器的时候。

hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.abc.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。
history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.abc.com/book/id。如果后端缺少对 /book/id 的路由处理，将返回 404 错误。Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”

路由模式的来龙去脉就这样七七八八的差不多辣 §(￣▽￣)§ §(￣▽￣)§