精华内容
下载资源
问答
  • 大家都知道vue-router有两种模式,hash模式和history模式,这里来谈谈vue-router中的hash和history两种模式的区别。感兴趣的朋友一起看看吧
  • 在vue的路由配置中有mode选项 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的 mode:”hash”;  mode:”history”;  hash模式和history模式的不同 对于vue这类渐进式前端开发框架,为了...
  • hash和history区别

    2021-06-19 12:57:53
    hash有#history没有,hash的url也就是#后面的内容改变不会发起请求,但会触发window.onhashchange事件,history的url改变也不会对后端发起qin

    history模式基于window.history对象的方法。

    常用的方法包括:

    • history.forward():在历史记录中前进一步
    • history.back():在历史记录中后退一步
    • history.go(n):在历史记录中跳转n步骤,n=0为刷新本页,n=-1为后退一页。
    • history.pushState(data[,title][,url]):向历史记录中追加一条记录
    • history.replaceState(data[,title][,url]):替换当前页在历史记录中的信息。
    • history.state:是一个属性,可以得到当前页的state信息。
    • window.onpopstate:是一个事件,在点击浏览器后退按钮或js调用forward()back()go()时触发。监听函数中可传入一个event对象,event.state即为通过pushState()replaceState()方法传入的data参数

    hash有#history没有,hash的url也就是#后面的内容改变不会发起请求,但会触发window.onhashchange事件,我们可以在本事件里做页面渲染的工作。history的url改变也不会对后端发起请求,但当它刷新时会对后端发起请求,如果后端没事先对此url做处理会报404,hash刷新则不会,它不会带#后面的内容到后端。hash 兼容IE8以上,history 兼容 IE10 以上。pushState 设置的新 URL 与当前 URL 一模一样,也会把记录添加到栈中;而 hash 设置的新值必须与原来不一样才会触发记录添加到栈中.

    展开全文
  • hash和history两种模式的区别

    千次阅读 多人点赞 2019-09-18 14:22:19
    vue-router(前端路由)有两种模式,hash模式和history模式,这里来谈谈两者的区别hash 就是指 url 尾巴后的 # 号以及后面的字符,history没有底带#,外观上比hash 模式好看些 原理的区别(原理) hash 能兼容...

    vue-router(前端路由)有两种模式,hash模式和history模式,这里来谈谈两者的区别。

    1. hash 就是指 url 尾巴后的 # 号以及后面的字符,history没有底带#,外观上比hash 模式好看些
    2. 原理的区别(原理)
    3.  hash 能兼容到IE8, history 只能兼容到 IE10;
    4. 由于 hash 值变化不会导致浏览器向服务器发出请求,而且 hash 改变会触发 hashchange 事件(hashchange只能改变 # 后面的url片段);虽然hash路径出现在URL中,但是不会出现在HTTP请求中,对后端完全没有影响,因此改变hash值不会重新加载页面,基本都是使用 hash 来实现前端路由的。

    (因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就不好看了。history 模式改变 url 的方式会导致浏览器向服务器发送请求,这不是我们想看到的,我们需要在服务器端做处理:如果匹配不到任何静态资源,则应该始终返回同一个 html 页面。—)

        history模式URL就要和后端进行一致,所以要改为history也需要后端的配合,否则会报错。
    所以hash模式在每次刷新页面时是直接更改“#”后的东西,history每次刷新会重新像后端请求整个网址,也就是重新请求服务器。如果后端没有及时响应,就会报错404!。history的好处是可以进行修改历史记录,并且不会立刻像后端发起请求。不过如果对于项目没有硬性标准要求,我们可以直接使用hash模式开发。

     

    原理:hash通过监听浏览器的onhashchange()事件变化,查找对应的路由规则

     

     

    history原理: 利用H5的 history中新增的两个API pushState() 和 replaceState() 和一个事件onpopstate监听URL变化

     

    1. history模式
      利用了HTML5 History Interface中新增的pushState()和replaceState()方法,这两个方法应用于浏览器的历史记录栈,在当前已有的back、forward、go的基础上,他们提供了对当前浏览器进行修改的功能,只是当它们被修改时,虽然浏览器的URL发生
      了变化,但是不会立即向后端服务器发送请求,但是如果点击刷新,就会重新向后端服务器发送请求。
    2. 使用场景
      一般情况下,vue-router前端路由模式使用history和hash都可以,在美观上history比hash美观些,因为hash有自己的特定符号#
      相比于hash,history具有以下优势:
      *pushState()设置新的URL可以是任意与当前URL同源的URL,而hash只能改变#后面的内容,因此只能设置与当前URL同文档的URL
      *pushState()设置的URL与当前URL一模一样时也会被添加到历史记录栈中,而hash模式中,#后面的内容必须被修改才会被添加到新的记录栈中
      *pushState()可以通过stateObject参数添加任意类型的数据到记录中,而hash只能添加短字符串
      *pushState()可额外设置title属性供后续使用

    四、为什么要有hash和history?

    https://segmentfault.com/q/1010000010340823

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

    为了达到这一目的,浏览器当前提供了以下两种支持:

    1. hash —— 即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算)。

    比如这个 URL:http://www.abc.com/#/hello,hash 的值为 #/hello。它的特点在于:hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面。

    1. history —— 利用了 HTML5 History Interface 中新增的 pushState() 和replaceState() 方法。(需要特定浏览器支持)

    这两个方法应用于浏览器的历史记录栈,在当前已有的 back、forward、go 的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改时,虽然改变了当前的 URL,但浏览器不会立即向后端发送请求。

    因此可以说,hash 模式和 history 模式都属于浏览器自身的特性,Vue-Router 只是利用了这两个特性(通过调用浏览器提供的接口)来实现前端路由。

     

    如何使用history模式:

    new Router({

    //去掉地址中的哈希#

    mode:"history", // 还需要后台做一些配合

     

    五、使用场景:

    一般场景下,hash 和 history 都可以,除非你更在意颜值,# 符号夹杂在 URL 里看起来确实有些不太美丽。

    如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成

    URL 跳转而无须重新加载页面。—— Vue-router 官网

    另外,根据 Mozilla Develop Network 的介绍,调用 history.pushState() 相比于直接修改 hash,存在以下优势:

    • pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL;而 hash 只可修改 #后面的部分,因此只能设置与当前 URL 同文档的 URL;
    • pushState() 设置的新 URL 可以与当前 URL 一模一样,这样也会把记录添加到栈中;而 hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中;
    • pushState() 通过 stateObject 参数可以添加任意类型的数据到记录中;而 hash只可添加短字符串;
    • pushState() 可额外设置 title 属性供后续使用。

    当然啦,history 也不是样样都好。SPA 虽然在浏览器里游刃有余,但真要通过 URL 向后端发起 HTTP 请求时,两者的差异就来了。尤其在用户手动输入 URL 后回车,或者刷新(重启)浏览器的时候。

    1. hash 模式下,仅 hash 符号之前的内容会被包含在请求中,如 http://www.abc.com,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误。
    2. history 模式下,前端的 URL 必须和实际向后端发起请求的 URL 一致,如http://www.abc.com/book/id。如果后端缺少对 /book/id 的路由处理,将返回 404 错误。Vue-Router 官网里如此描述:“不过这种模式要玩好,还需要后台配置支持……所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。”

     

     

     

    展开全文
  • vue的路由分为hash和history模式,他俩最直观的区别就是hash路由有一个 # 号,而history是没有的。还有就是: 1. hash支持低版本的浏览器,而history就没有那么友好了 2. (1) hash模式下,它指 # 号之后的所有...

    vue的路由分为hash和history模式,他俩最直观的区别就是hash路由有一个 # 号,而history是没有的。还有就是:

    1. hash支持低版本的浏览器,而history就没有那么友好了

    2.

            (1) hash模式下,它指 # 号之后的所有字符,但是他虽然包含在url中,但是不包含在http请求中。所以改变hash值不会重新加载页面,对传给后端的url没有任何影响,因此不会重新加载页面。它每次改变都会触发hashchange事件,可以通过给window加上hashchange事件进行监听。它是单页面的标配。

            (2) history模式,利用了 HTML5 新增的 pushState() 和 replaceState() 方法,在原有的back、forward、go 的基础上,添加对历史记录修改的功能。他虽然改变了url,但是浏览器不会立即像后端发送请求。

    3. history模式下有一个问题,就是当页面刷新时,他会实实在在的发送请求,把url给传送过去,因此,如果后端没有做处理的话,就会因找不到资源而报404错误,因此使用history模式时可以跟后端进行配合。

            如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。

    展开全文
  • 路由hash和history区别

    千次阅读 2020-06-20 15:57:25
    vue-router 中有hash模式和history模式。 在vue的路由配置中有mode选项,最直观的区别就是在url中hash 带了一个 # ,而history是没有#的,vue默认使用hash。 mode:“hash”; mode:“history”; hash 即地址栏 URL 中...

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

    名称hashhistory
    urlhttps://baidu.com/#/homehttps://baidu.com/home
    刷新https://baidu.comhttps://baidu.com/home
    版本支持低版本和IE浏览器H5新推出的API

    hash

    即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算)。
    比如这个 URL:http://www.baidu.com/#/home,hash 的值为 #/home。它的特点在于:hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面。
    在这里插入图片描述
    在这里插入图片描述

    history

    利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法(需要特定浏览器支持),用来完成 URL 跳转而无须重新加载页面,不过这种模式还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,就需要配置404页面。

    const router = new VueRouter({
      mode: 'history',
      routes: [
        { path: '*', component: NotFoundComponent }
      ]
    })
    

    在这里插入图片描述
    在这里插入图片描述

    区别

    通过history api,我们丢掉了丑陋的#,但是它也有个问题:不怕前进,不怕后退,就怕刷新,(如果后端没有准备的话),因为刷新是实实在在地去请求服务器的。
    在hash模式下,前端路由修改的是#中的信息,而浏览器请求时不会将 # 后面的数据发送到后台,所以没有问题。但是在history下,你修改path时,当刷新时,如果服务器中没有相应的响应或者资源,则会刷新出来404页面。

    展开全文
  • history和hash区别

    千次阅读 2020-09-30 13:41:14
    1.hash带#,history没有 2.history相对比较新,只能兼容ie10,hash能兼容ie8 3.跳转的时候hash只能修改#后面的内容,而history只要是同源的就可以 原理: hash:通过监听浏览器的onhashchange()事件变化,查找对应...
  • vue中mode hash history区别

    万次阅读 多人点赞 2018-06-25 17:04:56
    对于 Vue 这类渐进式前端开发框架,为了...为了达到这一目的,浏览器当前提供了以下两种支持:hash —— 即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算)。比如这个 URL:http://www.abc.com/#/h...
  • hash和history模式的区别

    万次阅读 2019-04-23 17:03:11
    vue-router(前端路由)有两种模式,hash模式和history模式,这里来谈谈两者的区别hash模式 这里的 hash 就是指 url 尾巴后的 # 号以及后面的字符。这里的 # css 里的 # 是一个意思。hash 也称作锚点,本身...
  • VUE hash和history区别

    2021-08-01 02:37:58
    hash 带了一个 # 而history是没有#的 2.history模式:如果修改path,当刷新时,如果服务器中没有相应的响应或者资源,会刷出一个404界面 hash 模式:hash符号之前的内容会被包含在请求中,因此对于后端来说,即使...
  • hash和 history 区别

    2021-09-03 10:32:41
    hash模式和history模式的区别 区别hash模式url 带 #号 history 模式不带#号 hash 地址栏 url有变化不会重新加载页面 不会向后端发送请求 history 则相反,没有对应的页面就会出现404 但是在history下 你可以自由...
  • 1.URL链接显示不一样,hash里面会有"#",history没有"#"; 2.如果后台没有做相应配置,history页面会在再次刷新的时候,报404;hash则不会出现404报错 注意点: 给个警告,因为这么做以后,你的服务器就不再返回 404 ...
  • URL的hash URL的hash URL的hash也就是锚点(#), 本质上是改变window.location的href属性. 我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新 HTML5的history模式: history接口是HTML5新增的, ...
  • hash浏览器中有#号,#以及#号后面的都...history无#号 1.发送请求前端必须后端定义的请求格式一模一样, 例如:http://xxx.com/item/id,如果前端接口http://xxx.com/item/(缺少id字段)就会报错404,找不到页面 ...
  • hash —— 即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算)。 __ 比如这个 URL:http://www.abc.com/#/hello,hash 的值为 #/hello。 __ 它的特点在于:hash 虽然出现在...history —— 利用了 HTML5 H...
  • hash和history区别

    万次阅读 多人点赞 2018-12-28 14:45:29
    vue-router 中hash模式和history模式。 在vue的路由配置中有mode选项,最直观的区别就是在url中hash 带了一个很丑的 # ,而history是没有#的。vue默认使用hash。 mode:"hash"; mode:"history&...
  • 主要介绍了一文了解vue-router之hash模式和history模式,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 从用户角度看 前端路由实现了两个功能(使用ajax更新页面状态的情况下) 1、记录当前页面的状态(保存或分享当前页的url,再次打开该url时,网页还是保存的(分享)时的状态);...我们路由常用的hash模式和history
  • 不同点:很直观区别就是hash模式有带#,history模式就是一个正常的传统的路由。 hash模式监听的是onhashchange 方法来控制前端路由,history模式是监听popState来控制前端路由,history模式需要后端做一个支持,在找...
  • 表现形式的区别 Hash 模式 https://music.163.com/#/playlist?id=3102961863 History 模式 https://music.163.com/playlist/3102961863 原理的区别 Hash模式是基于锚点,以及onhashchange事件 ...
  • Vue的路由实现:hash模式 history模式hash 模式(Vue-router默认)示例:hash模式优缺点history 模式示例:history 模式的优缺点:传统路由跟前端路由不同 前端路由有两种模式:hash 模式 history 模式,接下来...
  • 【前端路由】Vue-router 中hash模式和history模式的区别

    万次阅读 多人点赞 2018-09-08 15:53:20
    咱们今天说说VUE路由的hash模式与history模式的区别,这个也是面试常问的问题,不要小看这道题其实问到这里的时候那个面试官应该是个大牛,开发经验丰富,这个题其实就是考验你的开发经验是否属实。 咱们来看看小白...
  • 这里写自定义目录标题hashhistory结言 hash url中#符号本身及其后面的都是hash,http请求并不包括hash部分。 vue源码中是通过window.location.hash改变路由,会在浏览器的访问历史中增加一个记录。 监听hash: ...
  • hashHistory 路由前方会多一个# 当切换页面时 客户端不会请求服务端 客户端会通过通过 HTML 5 History 进行前端路由管理。 hashHistory 每次切换页面 客户端都会去服务器请求资源文件 需要我们在服务器端进行...
  • hashhistory区别

    2021-04-09 09:17:45
    hashhistory区别 两种路由模式原因原因 对于 Vue 这类渐进式前端开发框架, 为了构建 SPA(单页面应用), 需要引入前端路由系统, 这也就是 Vue-Router 存在的意义。 前端路由的核心,就在于 —— 改变视图的...
  • 面试题:VueRouter中的 hash 模式 history 模式有什么区别 hash模式 hash 模式的路由中带有 # 号 hash 模式通过 window.onhashchange 方法监听路由的修改 hash 模式在页面刷新的时候,发送的请求 url 是不带 # ...
  • VUE中hash模式和history模式的区别

    千次阅读 2019-05-17 05:21:50
    在vue的路由配置中有mode选项 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的 mode:"hash"; mode:"history"; 复制代码hash模式和history模式的不同 对于vue这类渐进式前端开发框架,为了构建 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 44,332
精华内容 17,732
关键字:

hash和history的区别