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的区别的更多相关文章

  1. vue router mode 设置"hash"与"history"的区别

    router官网的说明如下: ********************************************我是官网说明分隔符--开始**************************** ...

  2. vue中mode hash 和 history的区别

    对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义.前端路由的核心,就在于 —— 改变视图的同时不会向后端发出请求. ...

  3. hash和history路由的区别

    在了解路由模式前,我们先看下 什么是单页面应用,vue-router  的实现原理是怎样的,这样更容易理解路由. SPA与前端路由 SPA(单页面应用,全程为:Single-page Web appl ...

  4. 前端路由hash、history原理及简单的实践下

    阅读目录 一:什么是路由?前端有哪些路由?他们有哪些特性? 二:如何实现简单的hash路由? 三:如何实现简单的history路由? 四:hash和history路由一起实现 回到顶部 一:什么是路由 ...

  5. vue 路由里面的 hash 和 history

    对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义.前端路由的核心,就在于 —— 改变视图的同时不会向后端发出请求. ...

  6. 利用hash或history实现单页面路由

    目录 html代码 css代码 JavaScript代码 hash方式 history 方式 浏览器端代码 服务器端 在chrome(版本 70.0.3538.110)测试正常 编写涉及:css, h ...

  7. hash和history

    location.hash="aaa" history.pushState({},'', "home") history.replaceState() hist ...

  8. Vue路由器的hash和history两种工作模式 && Vue项目编译部署

    1 # 一.Vue路由器的两种工作模式 2 # 1.对于一个uri来说,什么是hash值? 井号及其后面的内容就是hash值. 3 # 2.hash值不会包括含在HTTP请求中,即:hash值不会带给 ...

  9. vue-router的hash和history模式的区别

    一.概念 为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义. 前端路由的核心,就在于:改变视图的同时不会向后端发出请求. 为了达到这种目的,浏览器当前提 ...

随机推荐

  1. Js浮动广告效果实现

    第一种 漂浮广告 不符合W3CJavaScript漂浮广告代码,很不错,代码精简,不过一次只有漂一个,复制就能用了.希望站长朋友喜欢. <html> <head> <ti ...

  2. Linux 一直提示 login incorrect

  3. maven学习(二)maven常用的命令

    参考博客:(http://blog.csdn.net/keda8997110/article/details/20925449) 以下命令都是基于命令行的操作,也可以直接在eclipse等IDE上ma ...

  4. tr标签是什么

    <tr> 标签定义 HTML 表格中的行. tr 元素包含一个或多个 th 或 td 元素.

  5. 一键完成SAP部署的秘密,想知道么?

    诸如 SAP 这样的企业级应用已成为普遍的流行趋势.考虑到不同行业和需求的特点,所选平台必须能够为不同层面用户和各种 IT 活动提供灵活的容量需求. 此时上云也许是种不错的选择,而想上云的企业,一方面 ...

  6. Python迭代器生成器,私有变量及列表字典集合推导式(二)

    1 python自省机制 这个是python一大特性,自省就是面向对象的语言所写的程序在运行时,能知道对象的类型,换句话说就是在运行时能获取对象的类型,比如通过 type(),dir(),getatt ...

  7. 【Leetcode】【Easy】Remove Duplicates from Sorted Array

    Given a sorted array, remove the duplicates in place such that each element appear only once and ret ...

  8. Ubuntu下Qt(Retex)无法输入中文

    这个问题从我第一次在Ubuntu上使用Qt便困扰着我,奈何之前一直没认真去解决掉这个问题.今天作死想想,这个不可能解决不掉的.因为那么多人用Ubuntu,而且又那么多人用Qt的产品,比如Retext. ...

  9. OC 枚举

    void test() { // 定义一种枚举类型 enum Season {spring, summer, autumn, winter}; // 定义一个枚举变量s enum Season s = ...

  10. JQuery前端技术记录

    [Jquery-leearning notes-2015]by lijun 1   Jquery是javascript实现的库,目标在于改变web应用的高交互性的方式. 其不唐突性:样式(.css). ...