哈希路由(hash模式)和历史路由(history模式)的区别

随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行。

从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下):

  1. 记录当前页面的状态(保存或分享当前页的url,再次打开该url时,网页还是保存(分享)时的状态);
  2. 可以使用浏览器的前进后退功能(如点击后退按钮,可以使页面回到使用ajax更新页面之前的状态,url也回到之前的状态);

作为开发者,要实现这两个功能,我们需要做到:

  1. 改变url且不让浏览器向服务器发出请求;
  2. 监测 url 的变化;
  3. 截获 url 地址,并解析出需要的信息来匹配路由规则。

我们路由常用的hash模式和history模式实际上就是实现了上面的功能。

hash模式

这里的 hash 就是指 url 尾巴后的 # 号以及后面的字符。这里的 # 和 css 里的 # 是一个意思。hash 也 称作 锚点,本身是用来做页面定位的,她可以使对应 id 的元素显示在可视区域内。

由于 hash 值变化不会导致浏览器向服务器发出请求,而且 hash 改变会触发 hashchange 事件,浏览器的进后退也能对其进行控制,所以人们在 html5 的 history 出现前,基本都是使用 hash 来实现前端路由的。

使用到的api:

1 window.location.hash = ‘qq‘ // 设置 url 的 hash,会在当前url后加上 ‘#qq‘
2
3 var hash = window.location.hash // ‘#qq‘
4
5 window.addEventListener(‘hashchange‘, function(){
6     // 监听hash变化,点击浏览器的前进后退会触发
7 })

history模式

已经有 hash 模式了,而且 hash 能兼容到IE8, history 只能兼容到 IE10,为什么还要搞个 history 呢?
首先,hash 本来是拿来做页面定位的,如果拿来做路由的话,原来的锚点功能就不能用了。其次,hash 的传参是基于 url 的,如果要传递复杂的数据,会有体积的限制,而 history 模式不仅可以在url里放参数,还可以将数据存放在一个特定的对象中。
最重要的一点:

如果不想要很丑的 hash,我们可以用路由的 history 模式
—— 引用自 vueRouter文档

相关API:

 1 window.history.pushState(state, title, url)
 2 // state:需要保存的数据,这个数据在触发popstate事件时,可以在event.state里获取
 3 // title:标题,基本没用,一般传 null
 4 // url:设定新的历史记录的 url。新的 url 与当前 url 的 origin 必须是一樣的,否则会抛出错误。url可以是绝对路径,也可以是相对路径。
 5 //如 当前url是 https://www.baidu.com/a/,执行history.pushState(null, null, ‘./qq/‘),则变成 https://www.baidu.com/a/qq/,
 6 //执行history.pushState(null, null, ‘/qq/‘),则变成 https://www.baidu.com/qq/
 7
 8 window.history.replaceState(state, title, url)
 9 // 与 pushState 基本相同,但她是修改当前历史记录,而 pushState 是创建新的历史记录
10
11 window.addEventListener("popstate", function() {
12     // 监听浏览器前进后退事件,pushState 与 replaceState 方法不会触发
13 });
14
15 window.history.back() // 后退
16 window.history.forward() // 前进
17 window.history.go(1) // 前进一步,-2为后退两步,window.history.lengthk可以查看当前历史堆栈中页面的数量

history 模式改变 url 的方式会导致浏览器向服务器发送请求,这不是我们想看到的,我们需要在服务器端做处理:如果匹配不到任何静态资源,则应该始终返回同一个 html 页面。

原文地址:https://www.cnblogs.com/GGbondLearn/p/12239651.html

时间: 2024-10-29 14:50:07

哈希路由(hash模式)和历史路由(history模式)的区别的相关文章

哈希(Hash)与加密(Encrypt)相关内容

1.哈希(Hash)与加密(Encrypt)的区别 哈希(Hash)是将目标文本转换成具有相同长度的.不可逆的杂凑字符串(或叫做消息摘要),而加密(Encrypt)是将目标文本转换成具有不同长度的.可逆的密文. i.哈希算法往往被设计成生成具有相同长度的文本,而加密算法生成的文本长度与明文本身的长度有关. 例:设我们有两段文本:"Microsoft"和"Google".两者使用某种哈希算法得到的结果分别为:"140864078AECA1C7C35B4BEB

前端路由hash、history原理

本文参考https://www.cnblogs.com/tugenhua0707/p/10859214.html 先来看下后端路由的实现方式: 1. 浏览器向服务器发出请求.2. 服务器监听到80端口,如果有请求过来,那么就解析url地址.3. 服务器根据客户端的路由配置,然后就返回相应的信息(比如html字符串.json数据或图片等).4. 浏览器根据数据包的 Content-Type来决定如何解析数据. 缺点: 每次路由切换的时候都需要去刷新页面,然后发出ajax请求,然后将请求数据返回回来

vue路由的两种模式配置以及history模式下面后端如何配置

vue路由的两种模式配置以及history模式下面后端如何配置 1.hash ——即地址栏URL中的#符号.hash 虽然出现URL中,但不会被包含在HTTP请求中,对后端完全没有影响,因此改变hash不会重新加载页面.2.history ——利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法.需要特定浏览器支持history模式,会出现404 的情况,需要后台配置.3.hash模式下,仅hash符号之前的内容会被包含在请求

AP、路由、中继、桥接、客户端模式之间的区别

在TP-Link迷你无线路由器上一般有AP(接入点)模式.Router(无线路由)模式.Repeater(中继)模式.Bridge(桥接)模式. Client(客户端)模式:但很多用户都不清楚这几种模式的之间的区别,下面将对这几种模式进行详细的介绍. 注意:有的型号的TP-Link 迷你无线路由器上只有AP(接入点)模式.Router(无线路由)模式.Repeater(中继)模式这3种模式. 一.AP(接入点)模式 AP(接入点)模式下,只需要把一根可以上网的网线插在192.168.1.253路

hash 模式与 history 模式小记

hash 模式 这里的 hash 就是指 url 后的 # 号以及后面的字符.比如说 "www.baidu.com/#hashhash" ,其中 "#hashhash" 就是我们期望的 hash 值. 由于 hash 值的变化不会导致浏览器像服务器发送请求,而且 hash 的改变会触发 hashchange 事件,浏览器的前进后退也能对其进行控制,所以在 H5 的 history 模式出现之前,基本都是使用 hash 模式来实现前端路由. history 模式 利用

从Angular2路由引发的前后端路由浅谈

笔者的学习进度比较慢,直到两年以前写的网站都还是以服务端为主导的,即网站的所有视图都由服务器视图模板来渲染,笔者使用的是 DotNet MVC,开发套路就是在Controller里面写Action,在Views里写对应的Action.cshtml,使用ajax发起请求已经是比较前端的事情了.这种时候由于DotNet MVC框架继承的微软风格的懒人模式,甚至不需要去知道其路由是如何实现的,给人一种感觉是只要在浏览器里敲进去Controller名与Action名,就访问到视图了. 后来笔者开始使用n

hash和history模式

new router({mode:'history', routes:[]}) 正常a标签hash模式得href='#/home',histroy模式用a标签会跳转链接刷新页面,这是因为a标签的默认行为 解决方式:用<router-link to='/home'></router-link>(不管是hash还是history都支持) <router-link></router-link>的参数 :to='index' :to='{path:'/home',c

vue-router之路由钩子(组件内路由钩子必须在路由组件调用,子组件没用)

模式 vue-router中的模式选项主要在router实例化的时候进行定义的,如下 const router = new VueRouter({ mode: 'history', // 两种类型history 还有 hash routes: routes // 可以缩写成routes }) 有两种模式可供选择,history 和 hash,大致对比一下, 模式 优点 缺点 hash 使用简单.无需后台支持 在url中以hash形式存在,不会传到后台 history 地址明确,便于理解和后台处理

Vue路由重写# 与 Web服务器路由重写双配置实现路由重写

前言vue路由组件我使用的vue-routerweb服务器使用nginx Vue-router配置vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载http://localhost:8080/#/HelloWorld如果不想要很丑的 hash,可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面 const router