hash和history的区别
vue-router 中hash模式和history模式。
在vue的路由配置中有mode选项,最直观的区别就是在url中hash 带了一个很丑的 # ,而history是没有#的。vue默认使用hash。
mode:"hash";
mode:"history";
hash
—— 即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算)。
比如这个 URL:http://www.aaa.com/#/hello,hash 的值为 #/hello。它的特点在于:hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面。
history
—— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。(需要特定浏览器支持)
这两个方法应用于浏览器的历史记录栈,在当前已有的 back、forward、go 的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改时,虽然改变了当前的 URL,但浏览器不会立即向后端发送请求。
因此可以说,hash 模式和 history 模式都属于浏览器自身的特性,Vue-Router 只是利用了这两个特性(通过调用浏览器提供的接口)来实现前端路由。
history模式的问题
通过history api,我们丢掉了丑陋的#,但是它也有个问题:不怕前进,不怕后退,就怕刷新,f5,(如果后端没有准备的话),因为刷新是实实在在地去请求服务器的。
在hash模式下,前端路由修改的是#中的信息,而浏览器请求时不会将 # 后面的数据发送到后台,所以没有问题。但是在history下,你可以自由的修改path,当刷新时,如果服务器中没有相应的响应或者资源,则会刷新出来404页面。
hash和history的区别的更多相关文章
- vue router mode 设置"hash"与"history"的区别
router官网的说明如下: ********************************************我是官网说明分隔符--开始**************************** ...
- vue中mode hash 和 history的区别
对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义.前端路由的核心,就在于 —— 改变视图的同时不会向后端发出请求. ...
- hash和history路由的区别
在了解路由模式前,我们先看下 什么是单页面应用,vue-router 的实现原理是怎样的,这样更容易理解路由. SPA与前端路由 SPA(单页面应用,全程为:Single-page Web appl ...
- 前端路由hash、history原理及简单的实践下
阅读目录 一:什么是路由?前端有哪些路由?他们有哪些特性? 二:如何实现简单的hash路由? 三:如何实现简单的history路由? 四:hash和history路由一起实现 回到顶部 一:什么是路由 ...
- vue 路由里面的 hash 和 history
对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义.前端路由的核心,就在于 —— 改变视图的同时不会向后端发出请求. ...
- 利用hash或history实现单页面路由
目录 html代码 css代码 JavaScript代码 hash方式 history 方式 浏览器端代码 服务器端 在chrome(版本 70.0.3538.110)测试正常 编写涉及:css, h ...
- hash和history
location.hash="aaa" history.pushState({},'', "home") history.replaceState() hist ...
- Vue路由器的hash和history两种工作模式 && Vue项目编译部署
1 # 一.Vue路由器的两种工作模式 2 # 1.对于一个uri来说,什么是hash值? 井号及其后面的内容就是hash值. 3 # 2.hash值不会包括含在HTTP请求中,即:hash值不会带给 ...
- vue-router的hash和history模式的区别
一.概念 为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义. 前端路由的核心,就在于:改变视图的同时不会向后端发出请求. 为了达到这种目的,浏览器当前提 ...
随机推荐
- javascript接入阿里云服务器
authInfo = r.data.authInfo[0]//后台请求的 var client = new OSS({ region: 'oss-cn-beijing',// 云账号AccessKey ...
- MicroService
- File GDB API
bbs一问一答 https://blogs.esri.com/esri/arcgis/2010/12/13/file-geodatabase-api-details/ 下载页面 http://www. ...
- Android 环信聊天头像昵称显示解决方案
从消息扩展中获取昵称和头像 昵称和头像的获取:把用户基本的昵称和头像的URL放到消息的扩展中,通过消息传递给接收方,当收到一条消息时,则能通过消息的扩展得到发送者的昵称和头像URL,然后保存到本地数据 ...
- DLRS(深度学习应用于推荐系统论文汇总--2017年8月整理)
Recommender Systems with Deep Learning Alessandro:ADAAlessandro Suglia, Claudio Greco, Cataldo Musto ...
- percona mysql 5.7再centerOS 7上的安装
第一次测试装的,还不是很熟练.很多东西不太对,以后还回改进 一.卸载包检查是否安装有MySQL Server: rpm -qa | grep mysql rpm -qa | grep mariadb ...
- ORACLE_FUNCTION
FUNCTION: DEFINE:函数一般用于计算和返回一个值,可以将经常需要使用的计算或功能写成一个函数. 1.basic syntax create [or replace] function f ...
- March 19 2017 Week 12 Sunday
If you want it, work for it. It's that simple. 很简单,想要什么,就为之努力吧. Yes, it is very simple. Many of us j ...
- springIOC的那些事
springIOC动态代理的那些事儿 1.发现问题 今天在使用spring的IOC容器时发现了这样的一个问题: 首先有一个接口定义如下: public interface BookShopSer ...
- CRUD全栈式编程架构之服务层的设计
服务层代码 首先我先放出2个主要类的代码再分别讲解 接口 using System; using System.Collections.Generic; using System.Linq; usin ...