单页应用的深入了解

发表于 | 更新于:

有两种方式实现单页应用，Hash 和 H5 的 history

通过 Hash 实现前端路由

虽然 hash 的兼容性较好，但搜索引擎对带有 hash 的页面不友好,带有 hash 的页面内难以追踪用户行为

改变 url 的 hash 值是不会刷新页面的。可以通过<a href="#edit">edit</a>实现，也可以通过 JavaScript 实现：

1
2
3
4
5
window.location.hash='edit'
<!-- 赋值前 -->
http://localhost:3000
<!-- 赋值后  -->
http://localhost:3000/#edit

通过 hashchange 的事件，可以监听 hash 的变化：

1
2
3
4
5
6
7
window.onhashchange = function(event) {
  // to do showUI
};

window.addEventListener("hashchange", function(event) {
  // to do showUI
});

通过 H5 的 history 实现前端路由

History 路由是基于 HTML5 规范，在 HTML5 规范中提供了 history.pushState || history.replaceState 来进行路由控制。

属性：

History.length: 返回在会话历史中有多少条记录，包含了当前会话页面。
History.state: 保存了会触发 popState 事件的方法所传递过来的属性对象

方法：

History.back(): 在 history 中向后跳转,和用户点击浏览器回退按钮的效果相同
History.forward(): 向前跳转,和用户点击浏览器前进按钮的效果相同
History.go(number): 可以跳转到浏览器会话历史中的指定的某一个记录页
History.pushState(state, title, url): 新建一个历史记录项，pushState() 绝对不会触发 hashchange 事件，即使新的 URL 与旧的 URL 仅哈希不同也是如此。

state：存储 JSON 字符串，可以用在 popstate 事件中
title：现在大多浏览器忽略这个参数，直接用 null 代替
url：任意有效的 URL，用于更新浏览器的地址栏

History.replaceState(state, title, url): 修改了当前的历史记录项

1
2
3
4
5
history.pushState({}, null, '/about')
<!-- 前 -->
http://xxxx/
<!-- 后 -->
http://xxxx/about

React-router 用法

react-router-dom 是 react-router 的升级版，用于 web 端，react-route 是路由的核心。具体用法和 vue-router 类似，毕竟原理都差不多。react-router V2 的版本和最新版本变化还是有点多，这篇文章写的很详细：https://zhuanlan.zhihu.com/p/31874420 最近碰到比较多的就是，动态传值，路由嵌套的用法，看着项目里的写法，模仿着用也不难。