一，SPA的理解、什么是单页面应用？
1、整个应用只有一个完整的页面
2、点击页面中的链接不会刷新页面，只会做页面的局部更新
3、数据都需要通过ajax请求获取，并且在前端异步展现
二，什么是路由？
一个路由就是一个映射关系(key:value)
key:地址栏里边的路径，通过监测地址栏里边的路径path
127.0.0.1:5050/about （key:About）
127.0.0.1:5050/home （key:Home)
value:React组件，匹配每一个组件component,value可能是function或component
后端路由：
value是function, 用来处理客户端提交的请求
router.get(path, function(req, res)) //函数路由
当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据
前端路由：
浏览器端路由，value是component，用于展示页面内容
注册路由: <Route path="/test" component={Test}>
工作过程：当浏览器的path变为/test时, 当前路由组件就会变为Test组件
三，前端路由的基石
前端里边有一个DOM、和BOM（浏览器对象）
BOM里边有一个history对象（window.history）主要用于管理浏览器的路径、历史记录等等....
history.js(库)用来更改path
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前端路由的基石_history</title>
</head>
<body>
<a href="http://www.atguigu.com" onclick="return push('/test1') ">push test1</a><br><br>
<button onClick="push('/test2')">push test2</button><br><br>
<button onClick="replace('/test3')">replace test3</button><br><br>
<button onClick="back()"><= 回退</button>
<button onClick="forword()">前进 =></button>
<script type="text/javascript" src="https://cdn.bootcss.com/history/4.7.2/history.js"></script>
<script type="text/javascript">
// let history = History.createBrowserHistory() //方法一，直接使用H5推出的history身上的API
let history = History.createHashHistory() //方法二，hash值（锚点）后边都带一个#，兼容性极好
function push (path) {
history.push(path)
return false//改变浏览器的历史记录，但是不会进行跳转
}
function replace (path) {//替换最后一条记录
history.replace(path)
}
function back() {//回退
history.goBack()
}
function forword() {//前进
history.goForward()
}
history.listen((location) => {//做监听，只要路径发生变化就执行
console.log('请求路由路径变化了', location)
})
</script>
</body>
</html>
