前端路由hash、history、location总结

最新推荐文章于 2024-03-20 18:14:21 发布
最新推荐文章于 2024-03-20 18:14:21 发布
阅读量485 收藏 4
点赞数 1
文章标签： hash模式 前端路由 history对象属性 location对象属性
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sunday97/article/details/107670941
版权

一、理解前端路由，前端路由都有哪些？

1、理解路由

直接可理解为根据不同的url地址来显示不同的页面或内容的功能，最开始的后端路由有一个很大的缺点就是每次路由切换的时候都需要去刷新页面，然后发出ajax请求，然后将请求数据返回回来，那么这样每次路由切换都要刷新页面对于用户体验来说就会不太友好。因此为了提升用户体验，就有了前端路由，后面也就有了url的改变不会导致页面的刷新的成果。

2、前端路由方法

（1）history对象（window.history）

  • window.history.go()
最低0.47元/天 解锁文章
子月吾生
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解vue 单页应用（spa）前端路由实现原理
12-11
写在前面：通常 SPA 中前端路由有2种实现方式： window.history location.hash 下面就来介绍下这两种方式具体怎么实现的 一.history 1.history基本介绍 window.history 对象包含浏览器的历史，window.history 对象在编写时可不使用 window 这个前缀。history是实现SPA前端路由是一种主流方法，它有几个原始方法： history.back() – 与在浏览器点击后退按钮相同 history.forward() – 与在浏览器中点击按钮向前相同 history.go(n) – 接受一个整数作
【前端知识】常见的加密算法介绍
xiaobaizaza_Ry的博客
05-18 1971
略微介绍一下前端中常见的加密算法。前端中常见的加密算法主要形式包括——哈希函数，消息认证码，对称加密和非对称加密算法。包括各类型的定义，优缺点及常见应用场景。
【前端】关于Hash，MD5的学习
热爱思考、活力满满、开朗爱笑的年轻人
09-02 957
Hash，一般翻译做“散列”，也有直接音译为“哈希”的，就是把任意长度的输入通过散列算法变换成固定长度的输出，该输出就是散列值。这种转换是一种压缩映射，也就是，散列值的空间通常远小于输入的空间，不同的输入可能会散列成相同的输出，所以不可能从散列值来确定唯一的输入值。简单的说就是一种将任意长度的消息压缩到某一固定长度的消息摘要的函数。(来源百度百科解释)
js(JavaScript)数据结构之散列表（Hash）
星辰迷上大海的博客
01-13 1193
散列表（Hash）是一种常用的数据结构，用于存储键值对。它利用散列函数将键映射到一个数字索引上，以便快速地插入、删除和查找数据。在JavaScript 中，可以使用对象来实现散列表的功能。
前端路由hash、history、location的简介
Fancy_vae的博客
11-29 460
理解前端路由，前端路由都有哪些？ 1、理解路由 2、前端路由方法 （1）history对象（window.history） （2）location对象（主要是Hash） 3、hash (locstion对象属性) 和 pushState (history对象属性)对比 1、理解路由 直接可理解为根据不同的url地址来显示不同的页面或内容的功能，最开始的后端路由有一个很大的缺点就是每次路由切换的时候都需要去刷新页面，然后发出ajax请求，然后将请求数据返回回来，那么这样每次路由切换都要刷新页面对于用户体验来说
location.hash详解
热门推荐
哒哒哒
06-12 1万+
了解vue-router原理中更新URL但不重载页面原理之一location.hash1.存在形式及意义一般情况下为URL后 "#" 及其后面一部分组成，如http://www.test.com/#/something，其中http://www.test.com为真实的路径，而#/something则为网页中的位置，称之为锚点在访问锚点时会自动跳刀锚点所在的网页位置，通常有两种方式作为锚点<...
前端hash
追风筝的人
02-02 460
单页面应用：hash Hash：# （1）代表网页中的一个位置，例：#print，代表页面中print的位置 （2）http请求不包含#，#是指导浏览器动作的 （3）#后面的字符，被浏览器解析成标志符，不会被发送到服务端 （4）改变#，不触发网页重载，滚动到相应的位置 （5）改变#，会改变浏览器的访问历史，会增加一个浏览记录，对IE6，IE7不成立 （6）window.location.hash 读取#值，可读可写，读时，判断网页状态是否改变，写时，在不重载网页的前提下，增加一条历史记录 （7）onhash
location.hash用法
u012353112的博客
12-19 450
转自：http://blog.csdn.net/u013063153/article/details/52856663 假设当前的URL是 http://example.com/test.html#part2    document.write(location.hash); 结果为： #part2 location.hash就是获取或设置喵点链接的
HASH函数
weixin_43211186的博客
04-09 8434
散列函数代表除了对称和非对称加密之外的第三种加密类型，我们可以称之为无密钥加密。hash函数就是把任意长的输入位（或字节）变化成固定长的输出字符串的一种函数。输出字符串的长度称为hash函数的位数。 哈希不能用于发现原始消息的内容或其任何其他特征，但可用于确定消息是否已更改。几乎所有使用的散列函数都是迭代散列函数，“理想的散列函数是从所有可能的输入值得到所可能的有限输出值几何的一个随机映射。” 较好的散列函数例如：SHA-1，SHA-224，SHA-256和SHA-512。 哈希函数指
针对Vue路由history模式下Nginx后台配置操作
01-18
前端将vue路由模式改为history模式后需要运维配置才能正常访问，配置信如下 location / { root html; index index.html index.htm; try_files $uri $uri/ @rewrites; } location @rewrites { rewrite ^(.+)$...
vue-router中的hash和history两种模式的区别
01-19
众所周知，vue-router有两种模式，hash模式和history模式，这里来谈谈两者的区别。 hash模式 hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件: [removed] = function(event){ console.log...
front-end-router:这里我会通过两种方式实现前端路由（hash和historyapi），可能存在一定的兼容性
04-30
我们可以通过 location 对象的hash属性获取当前哈希部分（如'#red'包括'#'号）。我们可以用 Array 和 Object 来实现浏览器的前进后退功能。具体原理可参见代码中的注释。h5路由通过在 window 对象上监听 popstate ...
VUE的history模式下除了index外其他路由404报错解决办法
12-10
我们先来看下代码： location / { ... root /dist; ... } try_files首先会判断他是文件，还是一个目录，...vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。但是如果我
浅谈前端路由原理hash和history
fafafaz的博客
03-20 1120
hash 模式是一种把前端路由的路径用 # 拼接在真实 url 后面的模式在hash模式下，本质上是修改window.location.href实现的。前端路由的改变依托于#锚点，而锚点后边的值我们可以通过修改window.location.hash的值来修改，每一次hash值的变化都会导致触发hashchange这个事件，hash模式就是通过 hashchange 事件来 监听 hash 值的改变从而渲染页面对应的组件。
【负载均衡原理】hash函数与负载均衡原理
NineWaited的博客
12-13 824
了解负载均衡的原理，体会如何处理高并发服务器。
location.href与location.hash的区别
@芈文 的博客
08-02 4183
综：window.location.href表示重定向，后面跟着的是完整的url地址，与其相似的还有window.location.hash， 下面来比较window.location.href和window.locaiton.hash的区别。 （1）window.location.href 得到和使用的是完整的url，比如window...
解决前端项目中动态获取项目路径问题之Location对象
cinoway的博客
07-16 1406
书到用时方恨少，用好对象没烦恼。 今天简单记录一下Location对象使用后的一些笔记。需求：处理项目中静态资源的（绝对路径的获取） 今天在全局处理项目静态资源路径的时候，想把相对路径全部换成绝对路径，这样的话方便后期维护，但是维护一个路径变量后期在开发过程中随着服务的改变还要反复修改这个路径，感觉很麻烦。所以我们可以动态的去获取当前的服务路径。 Location:Location 对象存储在 Window 对象的 Location 属性中，表示那个窗口中当前显示的文档的 Web 地址 Locat.
LintCode HashFunction 哈希函数
wutingyehe的专栏
06-26 3600
在数据结构中，哈希函数是用来将一个字符串（或任何其他类型）转化为小于哈希表大小且大于等于零的整数。一个好的哈希函数可以尽可能少地产生冲突。一种广泛使用的哈希函数算法是使用数值33，假设任何字符串都是基于33的一个大整数，比如：hashcode("abcd") = (ascii(a) * 333 + ascii(b) * 332 + ascii(c) *33 + ascii(d)) % HASH_SI
毕业设计+编程项目实战+报名管理信息系统-基于ASP.NET技术(含完整源代码+开题报告+设计文档)
最新发布
06-02
一．系统运行必备环境： 1．软件环境：windows XP、Access 2003及以上版本、Excel 2003及其以上版本和.net FrameWork。 2．硬件环境：CPU要求PIII800及其以上，内存64M以上。 3．用户名:mere 密码:mere（未删除本记录条件下有效） 二．培训管理信息系统需要完成功能主要有： 1．系统管理 包括登陆、退出功能。 2．学生管理 包括报名、调班、延班、插班、退费等功能。 (1)报名：学生填写入学培训协议，录入人员依照协议将学生信息记入报名表和班级学生名册。 (2)调班：按照报名日期找出学生报名信息核对身份，在原来所报班级名册删除学生名字，在调班班级名册添加学生名字。 (3)延班：基本同上，按照报名日期找出学生报名信息核对身份，在原来所报班级名册删除学生名字，将该学生记入延班学生名册，以便调入新班级。 (4)插班：为了照顾关系单位的学生，特设置了插班的功能，可以根据需要设定学生学号。 (5)退费：根据培训机构实际情况有退费的实际需求，设置了全部退费和部分退费功能。 ①全部退费 按照报名日期找出学生报名信息核对身份，并依照协议判断用户是
nginx 将hash路由变为history路由
04-05
要将hash路由变为history路由，需要进行以下步骤： 1. 在nginx配置文件中添加以下代码： ``` location / { try_files $uri $uri/ /index.html; } ``` 这将重写所有请求到index.html文件。 2. 在Vue Router中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值