路由模式#

hash#

URL的hash就是锚点(#)，本质上是改变window.location的href属性

采用的是window.onhashchange=()=>实现的。在地址栏会出现#号，虽然看着不美观，但是不会包含在http请求中，对后端也没有任何影响

1// 直接赋值location.hash来改变href，页面不刷新
2location.hash = '/home'

history#

history模式，利用了 HTML5 新增的 pushState() 和 replaceState() 方法，在原有的back、forward、go 的基础上，添加对历史记录修改的功能。history模式下有一个问题，就是当页面刷新时，如果后端没有做处理的话，就会因找不到资源而报404错误。

history接口是HTML5新增的，它有5种模式改变URL而不刷新页面

1// history.pushState(data,title,url)
2history.pushState({},'','/home')
3
4// history.replaceState(data,title,url)
5history.replaceState({},'','/home')
6
7history.go(-1) // 返回上一页
8history.back() // 等价于history.go(-1)
9history.forward() //前进一页，等价于history.go(1)

hash和history的区别#

开发环境下，二者没有区别，都不会重新加载页面 hash虽然看着不美观，但是兼容性好 history虽然看着美观，但是兼容性略差 将来代码打包后，History模式，刷新当前页面报404错误

Vue中的路由默认是hash模式，使用URL的hash模拟一个完整的URL，于是当URL改变时，页面不会重新加载。

history模式充分利用了 history.pushState API来完成 URL跳转而无需重新加载页面。

hash虽然出现在URL中，但不用包含在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。

history模式提供了对历史记录进行修改的功能，只是当它们执行修改时，虽然改变了当前的URL，但浏览器不会立即向后端发送请求。history模式会出现404的情况，需要后台配置。

404错误

1.hash模式下，仅hash符号之前的内容会被包含在请求中，如 http://www.xiaosutongxue.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回404错误；

2.history模式下，前端的url必须和实际向后端发起请求的url一致，如：http://www.xiaosutongxue.com/api/id，如果缺少对/api/id的路由处理，将返回404错误。

node解决history模式打包后，刷新当前页面报404错误#

1npm install --save connect-history-api-fallback

1const express = require('express')
2const history = require('connect-history-api-fallback')
3const app = express()
4app.use(history())
5app.use(express.static(__dirname+'/static'))
6app.get('/',(req,res)=>{
7	res.send({
8		name:'苏东旭',
9		age:18
10	})
11})
12app.listen(3000,(err)=>{
13	if(!err) console.log('服务器启动成功了')
14})