前端路由原理和实现

一、起源

前端路由的出现是为了实现单页面应用，简称SPA（single page web application ）。

二、定义

简单的说，就是在保证只有一个 HTML 页面，且与用户交互时不刷新和跳转页面的同时，为 SPA 中的每个视图展示形式匹配一个特殊的 url。在刷新、前进、后退和SEO时均通过这个特殊的 url 来实现。
有两点特性：
• 改变 url 且不让浏览器像服务器发送请求。
• 可以监听到 url 的变化。

三、实现

History模式

使用的API

history.go(-1) //后退一页
history.go(2) //后退两页
history.forward() //前端一页
history.back() //后退一页

// 添加状态到栈
history.pushState()

// 新状态代替当前状态
history.replaceState()

// 返回当前状态对象
history.state

主要使用的api是 pushState 和 replaceState ，均接收三个参数：

• state：合法的javascript对象，可以用在 popstate 事件中

• title：现在大多数浏览器忽略这个参数，直接用null代替

• url：任意有效的URL，用于更新浏览器地址栏

对于 history模式 ，url改变只能由下面四种方式引起：

1. 点击浏览器前端或后退按钮
2. 点击a标签
3. 使用history.pushState
4. 使用history.replaceState

Hash模式

hash模式有个明显的特征，就是url中有 # 号，例如 www.baidu.com/#query=123 ，而 #query＝123 就是我们期望的 hash 值。

使用的API：

// 设置hash值
window.location.hash = 'xxx'

//获取hash值
let hash = window.location.hash

//监听hash值变化，点击浏览器前端后退也会触发
window.addEventListener('hashchange', function(event){ 
    let newURL = event.newURL; // hash 改变后的新 url
    let oldURL = event.oldURL; // hash 改变前的旧 url
},false)