关于vue中hash和history的区别与使用图文详解
作者:cc.ChenLy 时间:2024-05-13 09:14:31
一、区别
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)
2、设置路由模式
3、打包
使用webpack的npm build命令,生成以下文件
4、模拟一个服务器(nodejs的express)
初始化
调试
5、把打包好的文件放到服务器
6、访问,路由跳转不涉及网络请求
7、刷新页面,资源请求失败,发送网络请求/MyHome/message/details/1/message001失败
因为服务器上没有这个请求(history模式存在这个问题,hash模式则无)
8、解决办法
使用connect-history,根据npm官方文档
9、再次调试,刷新后依旧没问题
总结
来源:https://blog.csdn.net/weixin_46589442/article/details/125796515
标签:hash,history,区别
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Android分包MultiDex策略详解
2021-11-14 13:28:42
python3+openCV 获取图片中文本区域的最小外接矩形实例
2022-03-16 00:57:11
![](https://img.aspxhome.com/file/2023/9/103719_0s.jpg)
解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了
2023-06-13 19:13:36
![](https://img.aspxhome.com/file/2023/7/59637_0s.jpg)
Myeclipse链接Oracle等数据库时lo exception: The Network Adapter could not establish the connection
2023-07-19 12:40:02
![](https://img.aspxhome.com/file/2023/2/64542_0s.png)
将Python中的数据存储到系统本地的简单方法
2021-08-22 18:15:55
python中文件操作与异常的处理图文详解
2021-09-04 16:04:33
![](https://img.aspxhome.com/file/2023/2/78822_0s.jpg)
Go语言快速入门图文教程
2023-07-23 10:30:16
![](https://img.aspxhome.com/file/2023/7/95367_0s.jpg)
机器学习python实战之手写数字识别
2021-06-29 03:07:07
![](https://img.aspxhome.com/file/2023/0/127140_0s.png)
Python @property原理解析和用法实例
2023-05-19 00:59:41
Python 使用tf-idf算法计算文档关键字权重并生成词云的方法
2022-03-28 13:09:18
![](https://img.aspxhome.com/file/2023/5/82965_0s.png)
MySQL 查看链接及杀掉异常链接的方法
2024-01-27 00:29:40
ASP JSON类源码
2011-04-30 16:38:00
Python实现获取nginx服务器ip及流量统计信息功能示例
2023-08-03 02:03:26
CSS 那些事儿
2008-12-02 18:19:00
![](https://img.aspxhome.com/file/UploadPic/200812/2/css-17s.jpg)
原生JS与jQuery编写简单选项卡
2024-04-30 09:52:52
Python 获取 datax 执行结果保存到数据库的方法
2024-01-26 23:32:08
JAVA正则表达式匹配多个空格的解决方案
2022-07-29 14:39:31
MyCat环境搭建详细教程
2024-01-25 01:16:15
![](https://img.aspxhome.com/file/2023/1/67081_0s.png)
10点优化sql数据库技巧
2008-06-09 15:00:00
Pycharm无法正常安装第三方库的几条应对方法汇总
2021-07-18 00:59:52
![](https://img.aspxhome.com/file/2023/0/92270_0s.png)