Vue路由中的hash和history模式

Posted 2021-11-11 奥特曼　

hash和history最明显的区别就是路径上 hash比history多一个/# 

 

一、hash模式

在我们发请求时 例如 http://localhost:8080/#/login 中的 #/后面的被称为hash，当hash值发生变化时，浏览器并不会重新发送请求   发请求时并不会把hash带到浏览器请求中，但是会触发 window.hashchange事件，在这个事件参数中就可以获取到hash值，之后就会根据hash值的变化去更换路由。

window.onhashchange = (e) => {
  console.log(e)
}

二、history模式

history模式 更加好看些 路径中不会携带"#" ,依赖于h5中的history API中的

window.history.pushState(state, title[, url]) 
// state：需要保存的数据，这个数据在触发popstate事件时，可以在event.state里获取
// title：标题，基本没用，一般传 null
// url(可选值)：设定新的历史记录的 url。新的 url 与当前 url 的 origin 必须是一样的，否则会抛出错误。url可以是绝对路径，也可以是相对路径。
//如 当前url是 https://www.baidu.com/a/,执行history.pushState(null, null, './qq/')，则变成 https://www.baidu.com/a/qq/，
//执行history.pushState(null, null, '/qq/')，则变成 https://www.baidu.com/qq/

window.history.replaceState(state, title, url)
// 与 pushState 基本相同，但它是修改当前历史记录，而 pushState 是创建新的历史记录

window.addEventListener('popstate', function() {
	// 监听浏览器前进后退事件，pushState 与 replaceState 方法不会触发				
});

window.history.back() // 后退
window.history.forward() // 前进
window.history.go(1) // 前进一步，-2为后退两步，window.history.length可以查看当前历史堆栈中页面的数量

在vue中 如果你不想要比较丑的hash模式 可以采用history模式 

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

在开发模式期间： 运行项目 跳转别的页面后 刷新 时不会报错的 ，  但是一旦打包后 同样的操作 就会报错 进入一个404的页面，之所以进入404页面，所有的资源都在（静态资源）文件中 一开始不报错 因为把所有的资源已经请求过来了，在里面怎么跳转都会调用 history.pushState API ，但是跳转后再次刷新就会报错，原因是这个地址并不存在，里面并没有js资源，最主要的原因 还是vue是单页面应用 ,应该先去静态去拿资源，拿到资源后才可以访问，但是 刷新一个没有获取到静态资源的路径 肯定是会报错的，之所以hash模式不会报错 是因为 /#的路径都不会带到http请求中

补充：之所以开发时不报错 时webpack提供给我们了history路由模式

 解决 history刷新出现404问题

 1. 安装koa中间件的插件

npm install koa2-connect-history-api-fallback #专门处理history模式的中间件

2.注册中间件

const Koa  = require('koa')
const serve = require('koa-static');
const { historyApiFallback } = require('koa2-connect-history-api-fallback');
const app = new Koa();
// 这句话 的意思是除接口之外所有的请求都发送给了 index.html
app.use(historyApiFallback({ 
  whiteList: ['/api']
}));  // 这里的whiteList是 白名单的意思

app.use(serve(__dirname + "/public")); //将public下的代码静态化

app.listen(3333, () => {
  console.log('人资项目启动')
})