前端路由的两种模式
参考文章：hash模式和 history模式
一、hash 模式 - 通过URL中的哈希值实现页面的路由切换，不需要服务端参与
// http://example.com/#/page1 -> #/page1 就是 hash值 - #后面的字符
- 核心方法：『location.hash』
- 特点：改变视图，但不会向后端发出请求，服务器不会接收到哈希值的变化
- 后退：虽然修改路由不会重载页面，但是会创造一条访问历史记录，可后退
- 监听变化：onhashchange
- 适用场景：非常适合构建单页面应用 - 在不刷新整个页面的情况下，实现 js 动态改变页面内容的变化和更新
二、history 模式 - 通过 H5 history API 实现路由切换，需要配置服务端响应避免出错
history.pushState(null, null, '/page1');
// URL 被改为 http://example.com/page1
- 核心方法： history.pushState()、 history.replaceState() 、history.popstate()
- 不会向服务器发起请求，也不会更新整个页面
- 会更新 地址栏 URL + 历史记录 + 配合动态更新页面 + 触发 popState 事件
- 特点：，服务器会完整接收到 URL 请求，需要服务端响应
- 后退：基于已有的
back、forward、go方法，对历史记录栈进行修改 - 监听变化：
history.popState()