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

时间:2022-09-02 15:43:08

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

咱们来看看小白的回答。

小白回答:hash模式url带#号,history模式不带#号。

回答总结:这个回答其实和没有回答是一样,百度一下都知道了,官网文档也有,如果这样回答就能通过,那么那个面试官问这个问题又有什么意义呢?其实这个问题的意义是考验你的开发经验,与实际场景的应用和与后端人员的配合。

大牛解答:hash模式url里面永远带着#号,我们在开发当中默认使用这个模式。那么什么时候要用history模式呢?如果用户考虑url的规范那么就需要使用history模式,因为history模式没有#号,是个正常的url适合推广宣传。当然其功能也有区别,比如我们在开发app的时候有分享页面,那么这个分享出去的页面就是用vue或是react做的,咱们把这个页面分享到第三方的app里,有的app里面url是不允许带有#号的,所以要将#号去除那么就要使用history模式,但是使用history模式还有一个问题就是,在访问二级页面的时候,做刷新操作,会出现404错误,那么就需要和后端人配合让他配置一下apache或是nginx的url重定向,重定向到你的首页路由上就ok啦。

以上摘自:VUE路由的hash模式与history模式的区别?

官方介绍:HTML5 History 模式

关于Vue的路由一直以来个人都觉得是一件很神奇的事情,一个单页面应用居然可以做到多路由跳转并按需加载页面代码。以往的做法都是通过锚点来定位对应的页面代码,而这种古老的操作方式最大的问题就是首屏加载缓慢,一次性加载了所有页面代码。

那么Vue-router又是怎么实现的呢?

首先,这个router有两种模式:hash模式(默认)、history模式(需配置mode: 'history')

hash与history的区别
  hash history
url显示 有#,很Low 无#,好看
回车刷新 可以加载到hash值对应页面 一般就是404掉了
支持版本 支持低版本浏览器和IE浏览器 HTML5新推出的API

然后,我们来研究下两者的原理:

hash模式
我们先来认识下这位朋友#,这个#就是hash符号,中文名哈希符或锚点,当然这在我们前端领域姑且这么称呼。

然后哈希符后面的值,我们称之为哈希值。OK,接下来我们继续分析他的原理。路由的哈希模式其实是利用了window可以监听onhashchange事件,也就是说你的url中的哈希值(#后面的值)如果有变化,前端是可以做到监听并做一些响应(搞点事情),这么一来,即使前端并没有发起http请求他也能够找到对应页面的代码块进行按需加载。

后来人们给他起了一个霸气的名字叫前端路由,成为了单页应用标配。

大伙可以围观下网易云音乐的url模式:https://music.163.com/#/friend

history模式
我们先介绍一下H5新推出的两个神器:pushState与replaceState

具体自行百度,简而言之,这两个神器的作用就是可以将url替换并且不刷新页面,好比挂羊头卖狗肉,http并没有去请求服务器该路径下的资源,一旦刷新就会暴露这个实际不存在的“羊头”,显示404。

那么如何去解决history模式下刷新报404的弊端呢,这就需要服务器端做点手脚,将不存在的路径请求重定向到入口文件(index.html),前后端联手,齐心协力做好“挂羊头卖狗肉”的完美特效。

至此,我们的前端路由在实现与展示效果上又更进了一步!

总之,pushState方法不会触发页面刷新,只是导致history对象发生变化,地址栏会有反应。

总结
传统的路由指的是:当用户访问一个url时,对应的服务器会接收这个请求,然后解析url中的路径,从而执行对应的处理逻辑。这样就完成了一次路由分发。

而前端路由是不涉及服务器的,是前端利用hash或者HTML5的history API来实现的,一般用于不同内容的展示和切换。

----------------------------- 2018.10.19 补充 -----------------------------

history模式下,build之后本地 index.html 打开是无效的。

hash模式下,build之后本地 index.html 打开正常!

【前端路由】Vue-router 中hash模式和history模式的区别的更多相关文章

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

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

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

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

  3. 前端路由的两种模式: hash 模式和 history 模式

    随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行. 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记 ...

  4. 前端路由的两种模式:hash(#)模式和history模式(转)

    随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行. 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记 ...

  5. vue开发多页面应用 - hash模式和history模式

    我们知道vue可以快速开发web单页应用,而且官方为我们提供了自己的应用脚手架vue-cli,我们只需要下载脚手架,安装依赖后就可以启动vue应用雏形. 这得益与webpack的依赖追踪,各种资源后缀 ...

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

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

  7. Vue router中携带参数与获取参数

    Vue router中携带参数与获取参数 携带参数 query方式,就是?+&结构,例如/login?id=1 <router-link :to="{ name:'login' ...

  8. vue-router的hash模式与history模式的对比

    Vue-router 中hash模式和history模式的关系在vue的路由配置中有mode选项 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的mode:&quo ...

  9. hash模式与history模式

    随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行. 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记 ...

随机推荐

  1. jax-rs中的一些参数标注简介&lpar;&commat;PathParam&comma;&commat;QueryParam&comma;&commat;MatrixParam&comma;&commat;HeaderParam&comma;&commat;FormParam&comma;&commat;CookieParam&rpar;

    先复习一下url的组成: scheme:[//[user:password@]host[:port]][/]path[?query][#fragment] jax-rs anotation @Path ...

  2. PHP值传递和引用传递的区别

    PHP值传递和引用传递的区别.什么时候传值什么时候传引用 (1)按值传递:函数范围内对值的任何改变在函数外部都会被忽略 (2)按引用传递:函数范围内对值的任何改变在函数外部也能反映出这些修改 (3)优 ...

  3. DLL中传递STL参数(如Vector或者list等)会遇到的问题&lbrack;转载&rsqb;

    最近的一个项目中遇到了调用别人的sdk接口(dll库)而传给我的是一个vector指针,用完之后还要我来删除的情况.这个过程中首先就是在我的exe中将其vector指针转为相应指针再获取vector中 ...

  4. Java高级开发工程师

  5. 小心ThreadLocal的陷阱

    ThreadLocal用在多线程时保存线程级的局部变量,当我们需要在线程内共享数据时,ThreadLocal屡试不爽,但是ThreadLocal也会有一个问题,当你使用线程池时,线程可能会被重用,所以 ...

  6. 使用Pyquery&plus;selenium抓取淘宝商品信息

    配置文件,配置好数据库名称,表名称,要搜索的产品类目,要爬取的页数 MONGO_URL = 'localhost' MONGO_DB = 'taobao' MONGO_TABLE = 'phone' ...

  7. CF438E The Child and Binary Tree(生成函数,NTT)

    题目链接:洛谷 CF原网 题目大意:有 $n$ 个互不相同的正整数 $c_i$.问对于每一个 $1\le i\le m$,有多少个不同形态(考虑结构和点权)的二叉树满足每个点权都在 $c$ 中出现过, ...

  8. Java闰年的计算,Calendar的用法

    Java闰年的计算,Calendar的用法 代码如下: package com.aaa.zuoye; import java.text.ParseException; import java.util ...

  9. Jmeter(二十五)常见问题(转载)

    转载自 http://www.cnblogs.com/yangxia-test 收集工作中JMeter遇到的各种问题   1.  JMeter的工作原理是什么? 向服务器提交请求:从服务器取回请求返回 ...

  10. aspx导出文件

    System.IO.StringWriter sw = new System.IO.StringWriter(); HtmlTextWriter htw = new HtmlTextWriter(sw ...