浏览器之前端路由

Question

名词解释

在互联网世界里，有两个名词 URI（统一资源标识符）和 URL (统一资源定位符)。

URI：Uniform Resource Identifier，一串字符特征序列，用来唯一标识某个资源，可以标识任何事物。
URL：Uniform Resource Locator，由协议/域名/端口/路径/参数/锚点组成的字符序列，浏览器用它来寻找 web 资源。

我们平时在浏览器里输入的各种地址，都属于 URL。

背景

路由简单理解就是导航，你打开浏览器，想访问 ×× 网站，于是你输入这个网站的地址，然后浏览器给你导航到对应网站的主页去。在很久很久以前，jQuery 盛行那会，使用的是服务端路由，前端代码都包含在后端里，通常是由后端通过 JSP/PHP/.NET 等技术把前端的页面拼接上后端的数据，然后展示在页面上。在这种情况下，你每点击一个页面，就要刷新一次 URL 以便获取新的资源，这种被打断的浏览用户体验并不好。

后来，SPA 单页面应用出现了，它允许在不刷新页面的情况下更新页面内容，利用的是 Ajax 技术。但是单页面应用有两个很大问题：

• 它只有一个 url ，这意味着你在页面上做了几步操作，是无法记住的，也就是说，你可能在页面里点首页进详情页，但是一刷新就重来显示首页了，所以用户体验依然不好
• 正是因为只有一个 url，所以 SEO 不友好，搜索引擎无法采集分析到页面信息

为了解决如何在单页面里记住用户的行为步骤，前端路由出现了。

前端路由

路由要解决记住用户操作的问题，解决方式就是通过 url 的变化来展示不同资源页面 。对于 url 怎么变化的问题，业界给出了两种解决方案：

• hash 模式
• history 模式

hash 模式

这种模式的特点是改变 url # 后面的内容来更新资源，因为更改 # 内容不会引起网页重载，却可以在浏览器正常添加一条历史记录，比如下面这两个对应不同的资源页面：

• https://www.baidu.com/#/index
• https:///www.baidu.com/#/search

hash 值可以通过 window.location.hash = '×××' 来改变，另外就是通过监听 hashchange 事件来捕捉 url 的变化，进而决定页面内容的跳转更新，如下：

window.addEventListener('hashchange', function(event){ 
  console.log(event)
}, false)

hash 模式的优点在于兼容性好，无需额外的服务端配置；但缺点也是服务端无法感知 hash 后面的内容。

history 模式

history 路由格式如下：

• https://www.baidu.com/index
• https:///www.baidu.com/search

特点是通过浏览器提供的 history API 来操作。HTML 新增了 pushState 和 replaceState 两个 API 可以对浏览器历史记录进行新增和替换。以下是 API 列表：

• history.back() : 返回到上一个网址，相当于你在浏览器顶部栏左侧点击后退按钮
• history.forward() : 前进到下一个网址，相当于你在浏览器顶部栏左侧点击前进按钮
• history.go() ：根据参数前进几个页面，参数是一个整数值，如果为 0 ，就是刷新当前页面
• history.pushState() ：用于在浏览器历史中添加一条记录，注意这个方法不会触发页面刷新，只是导致地址栏和历史记录发生变化
• history.replaceState() ：修改当前 history 对象的记录，用新的 state 替换它

相对应 hash 模式的 hashchange 事件，history 模式下可以通过监听 popstate 事件来感知 url 的修改，如下代码：

window.addEventListener('popstate', function(e) {
  console.log(e)
})

history 模式的优点在于服务端可以完整的获取链接和参数，对于前端监控也更友好；而缺点则在于需要服务端配置指向同一个 HTML 页面路径

前端路由的应用

现在各大前端框架都有自己的路由解决方案，如 Vue 是 vue-router ，React 有 react-router 。这些库说到底都是对这两种路由解决方案的封装。对于我们来说，更重要的是了解前端路由解决了什么问题，它解决了记住用户访问页面操作的问题，通过无刷新切换内容的方式，带来了更好的用户体验。