关于vue中hash和history的区别与使用图文详解
更新时间：2023年03月29日 15:29:08 作者：cc.ChenLy
vue-router中有hash模式和history模式,下面这篇文章主要给大家介绍了关于vue中hash和history的区别与使用的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
一、区别
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、再次调试，刷新后依旧没问题
总结
到此这篇关于vue中hash和history的区别与使用的文章就介绍到这了,更多相关hash和history的区别与使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue安装依赖npm install时的报错问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了使用Vue开发自己的Chrome扩展程序过程详解，浏览器扩展程序是可以修改和增强 Web 浏览器功能的小程序。它们可用于各种任务，例如阻止广告，管理密码，组织标签，改变网页的外观和行为等等。,需要的朋友可以参考下2019-06-06
详解如何解决Vue和vue-template-compiler版本之间的问题
这篇文章主要介绍了详解如何解决Vue和vue-template-compiler版本之间的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了使用vant 自定义弹框全过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
Vue CLI4.0 webpack配置属性之productionSourceMap用法
这篇文章主要介绍了Vue CLI4.0 webpack配置属性之productionSourceMap用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
本篇文章主要介绍了详解使用Vue Router导航钩子与Vuex来实现后退状态保存，具有一定的参考价值，有兴趣的可以了解一下2017-09-09
这篇文章主要为大家详细介绍了利用vue的监听事件实现一个简单购物车，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-04-04
这篇文章主要介绍了Vue之读取并解析ini文件中的内容,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
vue+element 多个相同的select不允许重复选择问题
这篇文章主要介绍了vue+element 多个相同的select不允许重复选择问题，具有很好的参考价值，希望对大家有所帮助。2022-07-07
这篇文章主要介绍了vue+webpack实现异步加载的三种用法，文中给大家提到了vue+webpack实现异步组件加载的代码，非常不错，具有参考借鉴价值，需要的朋友参考下吧2018-04-04
最新评论