发布时间:2023-04-23 文章分类:WEB开发, 电脑百科 投稿人:李佳 字号: 默认 | | 超大 打印

一、区别

1、 history和hash都是利用浏览器的两种特性实现前端路由,history是利用浏览历史记录栈的API实现,hash是监听location对象hash值变化事件来实现

2、 history的url没有’#'号,hash反之

3、 相同的url,history会触发添加到浏览器历史记录栈中,hash不会触发,history需要后端配合,如果后端不配合刷新新页面会出现404,hash不需要

4、
HashRouter的原理:通过window.onhashchange方法获取新URL中hash值,再做进一步处理 HistoryRouter的原理:通过history.pushState 使用它做页面跳转不会触发页面刷新,使用window.onpopstate 监听浏览器的前进和后退,再做其他处理

二、使用

举例说明history模式

1、现有一个这样的页面(Vue2)关于hash和history的区别和使用关于hash和history的区别和使用
2、设置路由模式

关于hash和history的区别和使用
3、打包
使用webpack的npm build命令,生成以下文件
关于hash和history的区别和使用
4、模拟一个服务器(nodejs的express)
初始化
关于hash和history的区别和使用
关于hash和history的区别和使用

调试
关于hash和history的区别和使用
关于hash和history的区别和使用

5、把打包好的文件放到服务器
关于hash和history的区别和使用

6、访问,路由跳转不涉及网络请求
关于hash和history的区别和使用
7、刷新页面,资源请求失败,发送网络请求/MyHome/message/details/1/message001失败,因为服务器上没有这个请求(history模式存在这个问题,hash模式则无)
关于hash和history的区别和使用
8、解决办法
使用connect-history,根据npm官方文档
关于hash和history的区别和使用
关于hash和history的区别和使用
9、再次调试,刷新后依旧没问题
关于hash和history的区别和使用