路由hash和history模式

56 篇文章 2 订阅
28 篇文章 1 订阅

参考: https://www.cnblogs.com/tugenhua0707/p/10859214.html
一、路由中的hash #
function hqhash(){
//location.hash设置或者获取hash值
v.hashzhi = location.hash.slice(1);
console.log(v.hashzhi)
}
// hqhash()
// addEventListener添加 事件 监听
// hashchange哈希值 改变事件
window.addEventListener(“hashchange”,hqhash);

二、history模式
根据pushState和replaceState切换

  1. hash只能修改url的片段标识符的部分。并且必须从#号开始,但是pushState且能修改路径、查询参数和片段标识符。pushState比hash更符合前端路由的访问方式,更加优雅(因为不带#号)。

  2. hash必须和原先的值不同,才能新增会话浏览历史的记录,但是pushState可以新增相同的url的记录,如下所示

当路由模式为history的时候,服务器端会根据浏览器中的请求地址去匹配资源,此时服务器端没有对应的接口地址,因此返回404.
解决办法:使用connect-history-api-fallback中间件
npm install --save connect-history-api-fallback

const history = require(‘connect-history-api-fallback’)
app.use(’/’, history());

三、webpack中的hash值
output: {
filename: ‘[name].[hash].js’,
path: path.resolve(__dirname, ‘dist’)
}

hash值,也叫散列函数。
释义bai:通过一定的哈希算法(典型du的有MD5,SHA-1等),将一段较zhi长的数dao据映射为较短小的数据,这段小数据就是大数据的哈希值。他有这样一个特点,他是唯一的,一旦大数据发生了变化,哪怕是一个微小的变化,他的哈希值也会发生变化。

另外一方面,既然是DNA,那就保证了没有两个数据的哈希值是完全相同的。

哈希值的作用:哈希值,即HASH值,是通过对文件内容进行加密运算得到的一组二进制值,主要用途是用于文件校验或签名。正是因为这样的特点,它常常用来判断两个文件是否相同。

比如,从网络上下载某个文件,只要把这个文件原来的哈希值同下载后得到的文件的哈希值进行对比,如果相同,则表示两个文件完全一致,下载过程没有损坏文件。而如果不一致,则表明下载得到的文件跟原来的文件不同,文件在下载过程中受到了损坏。
哈希值是不可逆的。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端段

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值