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. angular-自定义模块

    <!DOCTYPE html><html lang="en" ng-app="app"><head> <script ...

  2. canvas玩转微信红包

    CSS3相关属性: <!DOCTYPE html> <html> <head lang='en'> <meta charset='UTF-8'/> &l ...

  3. .NET开源工作流RoadFlow-表单设计-组织机构选择

    组织机构选择即在表单中添加组织机构选择框. 选择范围: 1.发起者部门:只能在发起者同一个部门中选择. 2.处理者部门:只能在当前处理者同一个部门中选择. 3.自定义:自己指定一个选择范围. 选择类型 ...

  4. SharePoint 2013 - Client OM

    1. 向 executeQueryAsync 中传递参数可以使用以下两种方式,也可以参考这篇文章: var mySuccessCallBack = Function.createCallback(on ...

  5. JS高级程序设计第三版——基本概念

    前言:任何语言的核心都必然会描述这门语言最基本的工作原理.而描述的内容通常都要设计这门语言的语法.操作符.数据类型.内置功能等用于构建复杂解决方案的基本概念. 语法: 1.  区分大小写: 2.  标 ...

  6. 龙珠直播之swot

    版本 v 0.3 龙珠直播有品牌优势,依托于苏宁PPTV,有大背景,有体育视频资源可用. 龙珠内容没有特色,没有特别火的亮点,定位于体育,没有免费路线,不能吸引大量活跃用户,女主播方式也没十分特点,解 ...

  7. 使用embeded tomcat进行嵌入式javaee开发-启动tomcat

    昨天在网上研究了下关于将tomcat嵌入到主程序中进行运行,而不是像以前将一个web项目copy到tomcat中进行运行.之所以这样做的原因,即是因为项目部署到客户方,在进行更新的时候,需要手动地进行 ...

  8. Linux 网卡的解决方法

    1. 编辑70-persistent-net配置文件: # vi /etc/udev/rules.d/70-persistent-net.rules 如果没有就新建一个,添加如下内容: # PCI d ...

  9. Android(java)学习笔记52:成员位置的内部类的介绍

    1. 内部类的定义 /* 内部类概述: 把类定义在其他类的内部,这个类就被称为内部类. 举例:在类A中定义了一个类B,类B就是内部类. 内部的访问特点: A:内部类可以直接访问外部类的成员,包括私有. ...

  10. Gulp 方法

    Gulp有5个基本方法:src.dest.task.run.watch Gulp.src()      gulp模块的src方法,用于产生数据流.它的参数表示索要处理的文件,一般有以下几种形式: js ...