在了解路由模式前,我们先看下 什么是单页面应用,vue-router  的实现原理是怎样的,这样更容易理解路由。

SPA与前端路由

SPA(单页面应用,全程为:Single-page Web applications)指的是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序,简单通俗点就是在一个项目中只有一个html页面,它在第一次加载页面时,将唯一完成的html页面和所有其余页面组件一起下载下来,所有的组件的展示与切换都在这唯一的页面中完成,这样切换页面时,不会重新加载整个页面,而是通过路由来实现不同组件之间的切换。

单页面应用(SPA)的核心之一是:更新视图而不重新请求页面。

vue Router实现原理

vue-router  在实现单页面路由时,提供了两种方式:Hash  模式和  History  模式;vue2是 根据  mode  参数来决定采用哪种方式,默认是  Hash  模式,手动设置为  History  模式。更新视图但不重新请求页面”是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现主要有以下两种方式

Hash

简述

  • vue-router   默认为hash模式,使用URL的  hash  来模拟一个完整的URL,当URL改变时,页面不会重新加载;#  就是  hash符号,中文名为哈希符或者锚点,在  hash  符号后的值称为  hash  值。
  • 路由的  hash  模式是利用了  window可以监听onhashchange 事件来实现的,也就是说  hash  值是用来指导浏览器动作的,对服务器没有影响,HTTP 请求中也不会包括  hash  值,同时每一次改变  hash  值,都会在浏览器的访问历史中增加一个记录,使用“后退”按钮,就可以回到上一个位置。所以,hash模式 是根据  hash 值  来发生改变,根据不同的值,渲染指定DOM位置的不同数据。

参考:Vue 前端路由工作原理,hash与history之间的区别

特点

  • url中带一个   #   号
  • 可以改变URL,但不会触发页面重新加载(hash的改变会记录在  window.hisotry  中)因此并不算是一次http请求,所以这种模式不利于SEO优化
  • 只能修改  #  后面的部分,因此只能跳转与当前URL同文档的URL
  • 只能通过字符串改变URL
  • 通过  window.onhashchange  监听  hash  的改变,借此实现无刷新跳转的功能。
  • 每改变一次  hash ( window.location.hash),都会在浏览器的访问历史中增加一个记录。
  • 路径中从  #  开始,后面的所有路径都叫做路由的  哈希值,并且哈希值它不会作为路径的一部分随着http请求,发给服务器

参考:在SPA项目的路由中,注意hash与history的区别

History

简述

  • history  是路由的另一种模式,在相应的  router  配置时将  mode  设置为  history  即可。
  • history  模式是通过调用  window.history  对象上的一系列方法来实现页面的无刷新跳转。
  • 利用了 HTML5 History Interface  中新增的   pushState()  和  replaceState()  方法。
  • 这两个方法应用于浏览器的历史记录栈,在当前已有的  back、forward、go  的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改时,虽然改变了当前的 URL,但浏览器不会立即向后端发送请求。

参考:深入了解前端路由 hash 与 history 差异

特点

  • 新的URL可以是与当前URL同源的任意 URL,也可以与当前URL一样,但是这样会把重复的一次操作记录到栈中。
  • 通过参数stateObject可以添加任意类型的数据到记录中。
  • 可额外设置title属性供后续使用。
  • 通过pushState、replaceState实现无刷新跳转的功能。
  • 路径直接拼接在端口号后面,后面的路径也会随着http请求发给服务器,因此前端的URL必须和向发送请求后端URL保持一致,否则会报404错误。
  • 由于History API的缘故,低版本浏览器有兼容行问题。

参考:在SPA项目的路由中,注意hash与history的区别前端框架路由实现的Hash和History两种模式的区别

生产环境存在问题

因为  history  模式的时候路径会随着  http 请求发送给服务器,项目打包部署时,需要后端配置 nginx,当应用通过  vue-router  跳转到某个页面后,因为此时是前端路由控制页面跳转,虽然url改变,但是页面只是内容改变,并没有重新请求,所以这套流程没有任何问题。但是,如果在当前的页面刷新一下,此时会重新发起请求,如果  nginx  没有匹配到当前url,就会出现404的页面。

那为什么hash模式不会出现这个问题呢?

       上文已讲,hash 虽然可以改变URL,但不会被包括在  HTTP  请求中。它被用来指导浏览器动作,并不影响服务器端,因此,改变  hash  并没有改变URL,所以页面路径还是之前的路径,nginx  不会拦截。
因此,切记在使用  history  模式时,需要服务端允许地址可访问,否则就会出现404的尴尬场景。

那为什么开发环境时就不会出现404呢?

因为在 vue-cli  中  webpack  帮我们做了处理

解决问题

生产环境 刷新 404 的解决办法可以在 nginx 做代理转发,在 nginx 中配置按顺序检查参数中的资源是否存在,如果都没有找到,让  nginx  内部重定向到项目首页。

参考:Vue 了解前端路由 hash 与 history 差异

hash和history路由的区别的更多相关文章

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

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

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

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

  3. 【前端路由】Vue-router 中hash模式和history模式的区别

    咱们今天说说VUE路由的hash模式与history模式的区别,这个也是面试常问的问题,不要小看这道题其实问到这里的时候那个面试官应该是个大牛,开发经验丰富,这个题其实就是考验你的开发经验是否属实. ...

  4. Vue路由的hash模式与history模式的区别?

    1.首先router有两种模式:hash模式(默认).history模式(需配置mode: 'history') hash和history的区别?   hash                    ...

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

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

  6. hash和history的区别

    vue-router 中hash模式和history模式. 在vue的路由配置中有mode选项,最直观的区别就是在url中hash 带了一个很丑的 # ,而history是没有#的.vue默认使用ha ...

  7. Vue-router 中hash模式和history模式的区别

    实际上存在三种模式: Hash: 使用URL的hash值来作为路由.支持所有浏览器. History: 以来HTML5 History API 和服务器配置.参考官网中HTML5 History模式 ...

  8. Vue中hash模式和history模式的区别

    vue-router 中hash模式和history模式. 在vue的路由配置中有mode选项,最直观的区别就是在hash模式下的地址栏里的URL夹杂着‘#’号 ,而history模式下没有.vue默 ...

  9. 告别 hash 路由,迎接 history 路由

    博客地址:https://ainyi.com/69 三月来了,春天还会远吗.. 在这里,隆重宣布本博客告别 Vue 传统的 hash 路由,迎接好看而优雅的 history 路由~~ 映照官方说法 v ...

随机推荐

  1. Java/C++实现模板方法模式---数据库操作

    对数据库的操作一般包括连接.打开.使用.关闭等步骤,在数据库操作模板类中我们定义了connDB().openDB().useDB().closeDB()四个方法分别对应这四个步骤.对于不同类型的数据库 ...

  2. 浅谈一下流式处理平台Flink

    浅谈一下流式处理平台(Flink) 大数据框架听过很多,比如 Hadoop,HDFS...不过自己的项目都没有上过 为什么突然提到 Flink,因为最近一个项目需要用到,所以学习最好的方式就是项目驱动 ...

  3. python循环与基本数据类型内置方法

    今天又是充满希望的一天呢 一.python循环 1.wuile与else连用 当while没有被关键'break'主动结束的情况下 正常结束循环体代码之后会执行else的子代码 "" ...

  4. 新手小白入门C语言第三章:关于数据类型

    C 语言包含的数据类型 1.整型 整型分为整形常量和整形变量,常量就是我们平时所看到的准确的数字,例如:1.20.333等等,变量则按我的理解是我像内存去申请一个存储空间,告诉内存空间我申请了这个地方 ...

  5. ArcGIS使用技巧(一)——数据存储

    新手,若有错误还请指正! 日常接触ArcGIS较多,发现好多人虽然也在用ArcGIS,但一些基础的小技巧并不知道,写下来希望对大家有所帮助. ArcGIS默认的存储数据库是在C盘(图1),不修改存储数 ...

  6. 2021.11.04 P1392 取数(多路归并)

    2021.11.04 P1392 取数(多路归并) P1392 取数 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 题意: 在一个n行m列的数阵中,你须在每一行取一个数(共n个数) ...

  7. 苞米面 C++ 模板库 介绍

    苞米面 C++ 模板库 简介 苞米面 C++ 模板库,无需编译,直接包含头文件就可以. 所有模板类和算法都包含在 bmm 名字空间里,例如: bmm::recent. 需要 C++ 编译器,支持 C+ ...

  8. 3.4 常用Linux命令

    1.cat命令 cat命令用于查看纯文本文件(内容较少的) 2.more命令 more命令用于查看纯文本文件(内容较多的),语法格式为"more [参数] 文件名称". 3.hea ...

  9. XCTF练习题---MISC---如来十三掌

    XCTF练习题---MISC---如来十三掌 flag:flag{bdscjhbkzmnfrdhbvckijndskvbkjdsab} 解题步骤: 1.观察题目,下载附件进行查看 2.打开附件,压根看 ...

  10. [AcWing 35] 反转链表

    迭代版本 点击查看代码 /** * Definition for singly-linked list. * struct ListNode { * int val; * ListNode *next ...