关于vue中hash和history的区别与使用图文详解
作者：cc.ChenLy 发布时间：2024-05-13 09:14:31
标签：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、再次调试，刷新后依旧没问题
总结
来源：https://blog.csdn.net/weixin_46589442/article/details/125796515
0
投稿猜你喜欢
- zip通常用于将两个列表合并在一起以同时进行迭代遍历注意：直接使用zip输出结果为<zip at 0x1d72cf30bc8>，
- cron是什么cron的意思就是：计划任务，说白了就是定时任务。我和系统约个时间，你在几点几分几秒或者每隔几分钟跑一个任务(job)，就那么
- 本文实例讲述了python创建关联数组（字典）的方法。分享给大家供大家参考。具体分析如下：关联数组在python中叫字典，非常有用，下面是定
Python包导入报错的问题首先，一般来说，写一个小demo可能一个文件就够了，但是要是做一个小项目，可能需要拆分成很多零散的文件，放在不同- --会员表 if object_id('userinfo','u') is not null drop ta
- 前言入门爬虫很容易，几行代码就可以，可以说是学习 Python 最简单的途径。刚开始动手写爬虫，你只需要关注最核心的部分，也就是先成功抓到数
- python的多线程比较鸡肋，优先使用多进程1 基础知识现在的 PC 都是多核的，使用多线程能充分利用 CPU 来提供程序的执行效率。1.1
- 由于项目需要，最近在用基于Python语言的一个后端框架Django开发web应用。不得不说，Django继承了Python的简洁性，用它来
- 在 AbpBase.Database 中，通过 Nuget 添加以下几个库：版本都是 1.9.0-preview0917
- 1：django-admin.py startproject 项目名2：cd 项目名3：修改setting.py（1）：
- 最近做有关GPS轨迹上有关的东西，花费心思较多，对两个常用的函数总结一下，求距离和求方位角，比较精确，欢迎交流！1. 求两个经纬点的方位角，
- index()方法确定字符串str，如果起始索引beg和结束索引end在末尾给出了找到字符串或字符串的一个子串。这个方法与fin
- Exec 是 os 包中的一个子包，它可用于使用 Go 运行外部命令。Go exec 命令教程展示了如何在 Golang 中执行 shell
- 1. 编码问题：遇到了几个字符串转换问题，总结如下：# str to bytes str.encode(s)# bytes to str b
- 一个老程序员，各种开发语言和技术都有涉及。每
- 前言上一节我们讲解了数据类型以及字符串中几个需要注意的地方，这节我们继续讲讲字符串行数同时也讲其他内容和穿插的内容，简短的内容，深入的讲解。
- Golang可以通过断言，判断值的类型s:="hello world"i:=interface{}(s)//将数值转化为
- 发现问题在使用pip install下载其他包时，报了错，如图：提示：“You are using pip versio
- 使用golang并发求和，作为对golang并发的一个练习.为了验证结果的正确性，要给出最传统的版本：func sum1(data []in
- 用ASP实现搜索引擎的功能是一件很方便的事，可是，如何实现类似3721的智能搜索呢？比如，当在搜索条件框内输入“中国人民”时，自动从中提取“
