精华内容
下载资源
问答
  • hash和history的区别

    2019-11-02 14:47:38
    hash和history的区别 一、从用户的角度看路由需实现以下两个功能 记录当前页的状态 保存或分享当前页面的URL,再次打开该URL时,网页还是保存的分享时的状态 可使用浏览器的前进后退功能 (如点击后退按钮,可以...

    hash和history的区别

    一、从用户的角度看路由需实现以下两个功能

    • 记录当前页的状态

    保存或分享当前页面的URL,再次打开该URL时,网页还是保存的分享时的状态

    • 可使用浏览器的前进后退功能

    (如点击后退按钮,可以使页面回到ajax更新页面之前的状态,url也回到之前的状态)

    二、作为开发者,要实现这两个功能,我们需要

    • 改变url且不让浏览器向服务器发出请求;
    • 监测url的变化;
    • 截获url地址,并解析出需要的信息来匹配路由规则。

    三、我们常用的hash模式和history模式实际上就是实现了上面的功能

    1. hash模式

    这里的hash就是指url尾巴后的#号以及后面的字符。这里的#和css里的#是一个意思。hash也称作锚点,本身是用来做页面定位的,他可以使对应的id元素显示在可视区域内。
    由于hash值变化不会导致浏览器向服务器发出请求,而且hash改变会触发hashchange事件,浏览器的进后退也能对其进行控制,所以人们在html5的history出现前,基本都是使用hash来实现前端路由的。他的特点在于:hash虽然出现url中,但不会被包含在HTTP请求中,对后端完全没有影响,因此改变hash不会重新加载页面。hash 本来是拿来做页面定位的,如果拿来做路由的话,原来的锚点功能就不能用了。其次,hash的而传参是基于url的,如果要传递复杂的数据,会有体积的限制

      window.location.hash='qq'//设置 url 的 hash,会在当前url后加上'#qq'
    
    var hash = window.location.hash //'#qq'
    
    window.addEventListener('hashchange',function(e){
      //监听hash变化,点击浏览器的前进后退会触发
       console.log(event.oldURL, event.newURL);
    })
    //或者使用以下方式
    //window.onhashchange = function(event){
    //     console.log(event.oldURL, event.newURL);
    //}
    

    2. history模式

    Hash的hashchange,你只能改变#后面的url片段,而history api则给了前端完全的自由。history模式不仅可以在url里放参数,还可以将数据存放在一个特定的对象中。

    history api可以分为两大部分,切换和修改

    history切换

    切换历史状态包括back、forward、go
    三个方法,对应浏览器的后退,前进,跳转操作,有同学说了,(谷歌)浏览器只有前进和后退,没有跳转,嗯,在前进后退上长按鼠标,会出来所有当前窗口的历史记录,从而可以跳转。

    history.go(-2);//后退两次
    history.go(2);//前进两次
    history.back(); //后退
    hsitory.forward(); //前进
    
    history修改

    history利用了H5中 History API中新增的pushState()和replaceState()方法。

    window.history.pushState(state,title,url)
    //state:需要保存的数据,这个数据在触发popstate事件时,可以在event.state里获取
    //title:标题,基本没用,一般传null
    //url:设定新的历史纪录的url。新的url与当前url的origin必须是一样的,否则会抛出错误。url可以时绝对路径,也可以是相对路径。
    //如 当前url是 https://www.baidu.com/a/,执行history.pushState(null, null, './qq/'),则变成 https://www.baidu.com/a/qq/,
    //执行history.pushState(null, null, '/qq/'),则变成 https://www.baidu.com/qq/
    
    window.history.replaceState(state,title,url)
    //与pushState 基本相同,但她是修改当前历史纪录,而 pushState 是创建新的历史纪录
    
    window.addEventListener("popstate",function(event){
     //监听浏览器前进后退事件,pushState与replaceState方法不会触发
      console.log(event.state)
    })
    //window.history.length可以查看当前历史堆栈中页面的数量
    
    

    ​ 通过pushstate把页面的状态保存在state对象中,当页面的url再变回这个url时,可以通过event.state取到这个state对象,从而可以对页面状态进行还原,这里的页面状态就是页面字体颜色,其实滚动条的位置,阅读进度,组件的开关的这些页面状态都可以存储到state的里面。
    ​ 这两个方法应用于浏览器的历史纪录,在当前已有的back、forward、go 的基础之上,他们提供了对历史纪录进行修改的功能,只是当他们执行修改使,虽然改变了当前的url,但你的浏览器不会立即像后端发送请求。

    总结

    1、hash模式下,仅hash符号之前的内容会被包含在请求中,如 http://www.abc.com因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回404错误;
    2、history模式下,前端的url必须和实际后端发起请求的url一致,如http://www.abc.com/details/id。如果后端缺少对/details/id 的路由处理,将返回404错误。

    展开全文
  • hash history的区别

    千次阅读 2018-07-12 09:50:10
    为什么要有 hash history对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在意义。前端路由核心,就在于 —— 改变视图同时不会向后端发出...

    为什么要有 hash 和 history

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

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

    1. hash —— 即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算)。
      比如这个 URL:http://www.abc.com/#/hello,hash 的值为 #/hello。它的特点在于:hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面。
    2. history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。(需要特定浏览器支持)
      这两个方法应用于浏览器的历史记录栈,在当前已有的 backforwardgo 的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改时,虽然改变了当前的 URL,但浏览器不会立即向后端发送请求。

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


    使用场景

    一般场景下,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 + Vue-Router + Webpack + XXX 形式的 Web 开发场景,用 history 模式即可,只需在后端(Apache 或 Nginx)进行简单的路由配置,同时搭配前端路由的 404 页面支持。

    展开全文
  • hash和history的区别 vue-router中hash模式和history模式。 在vue的路由配置中有mode选项,最直观的区别就是在url中的hash带了一个很丑的#,而history是没有#的。 mode:“hash”; mode:“history” hash 简单...

    hash和history的区别

    vue-router中hash模式和history模式。

    在vue的路由配置中有mode选项,最直观的区别就是在url中的hash带了一个很丑的#,而history是没有#的。

    mode:“hash”;
    mode:“history”

    hash

    简单来说hash虽然出现在UPL中,但不被包括在HTTP请求中,对后端完全没有影响,因此改变hash不会重新加载页面。

    history模式的问题

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

    展开全文
  • vue中mode hash history的区别

    千次阅读 2018-08-24 16:20:08
    vue中mode hash history的区别 资料链接:https://blog.csdn.net/lyn1772671980/article/details/80804419 对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 ...

    vue中mode hash 和 history的区别

    资料链接:https://blog.csdn.net/lyn1772671980/article/details/80804419

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

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

    1. hash —— 即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算)。
      比如这个 URL:http://www.abc.com/#/hello,hash 的值为 #/hello。它的特点在于:hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面。
    2. history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。(需要特定浏览器支持)
      这两个方法应用于浏览器的历史记录栈,在当前已有的 backforwardgo 的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改时,虽然改变了当前的 URL,但浏览器不会立即向后端发送请求。

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


    使用场景

    一般场景下,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 依赖的页面。”

    history模式怕啥

    通过history api,我们丢掉了丑陋的#,但是它也有个毛病:
    不怕前进,不怕后退,就怕刷新,f5,(如果后端没有准备的话),因为刷新是实实在在地去请求服务器的,不玩虚的。

    在hash模式下,前端路由修改的是#中的信息,而浏览器请求时是不带它玩的,所以没有问题.但是在history下,你可以自由的修改path,当刷新时,如果服务器中没有相应的响应或者资源,会分分钟刷出一个404来。

    展开全文
  • 路由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 中...
  • 这里写自定义目录标题hashhistory结言 hash url中#符号本身及其后面都是hash,http请求并不包括hash部分。 vue源码中是通过window.location.hash改变路由,会在浏览器访问历史中增加一个记录。 监听hash: ...
  • 2.如果后台没有做相应配置,history页面会在再次刷新时候,报404;hash则不会出现404报错 注意点: 给个警告,因为这么做以后,你服务器就不再返回 404 错误页面,因为对于所有路径都会返回index.html文件。为了...
  • 对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在意义。前端路由核心,就在于 —— 改变...它特点在于:hash 虽然出现在 URL 中,但不会被包括
  • Vue Router 是Vue官方路由管理器。它 Vue.js 核心深度集成,让构建单页面...const router = new VueRouter({ mode: 'history', // 这里可以配置是那种模式 routes: [...]})hash模式hash 模式工作原理是 hash...
  • 如果用户考虑url规范那么就需要使用history模式,因为history模式没有#号,是个正常url适合推广宣传 功能也有区别,比如我们在开发app时候有分享页面,那么这个分享出去页面就是用vue或是react做, 咱们把...
  • vue路由有两种模式--hash和history,二者该如何选择,对比如下: 二:hash模式 ......待完善 三:history模式 后台:node + express 建一个文件夹,例如:demo,进入demo文件夹中,创建一个server.js文...
  • router基于SPA--single page application单一页面应用程序开发只有一个单一页面加载页面时候,不会完整加载整个页面,而只是更新某一个指定容器更新视图而不是重新发送请求提供了两种模式Hash模式History模式...
  • hash和history的区别 vue路由跳转

    千次阅读 2019-03-20 10:32:56
    需要注意hash模式下修改是#后面内容,使用url的hash来模拟一个完整url,所以当url改变时,页面不会重新被加载 3. 特点: 能用来构建SPA(单页面引用),改变视图同事不会向后端发送请求 4.缺点:url...
  • 区别 hash hisoty # 路径中有 路径中没用 二次刷新 不会报错 会报404 hash模式如何设置? 默认就是,不用设置。 hisoty模式如何设置 在vue-cli->src>router>index.js> new Router({ mode:'...
  • https://blog.csdn.net/ygh5123687/article/details/89473578 https://www.jianshu.com/p/53dc287a8020
  • 转自:react-routerreact-router-dom的区别 - lanyan - 博客园RR4 本次采用单代码仓库模型架构(monorepo),这意味者这个仓库里面有若干相互独立的包,分别是:react-router React Router 核心react-router-dom ...
  • 前端Vue专题1,active-class 是哪个组件属性?嵌套路由怎么定义?2,怎么定义 vue-router 动态路由?怎么获取传过来动态参数?3,vue-router 有哪几种导航钩子?4,scss 是什么?使用步骤是?有那几大特性?5...
  • browserHistory和hashHistory的区别: 两者的区别简单来说是对路由方式的处理不一样,hashHistory 是以 # 后面的路径进行处理,通过 HTML 5 History 进行前端路 由管理,而 browserHistory 则是类似我们通常的页面...
  • hash和history模式的区别

    千次阅读 2019-04-23 17:03:11
    vue-router(前端路由)有两种模式,hash模式和history模式,这里来谈谈两者的区别hash模式 这里的 hash 就是指 url 尾巴后的 # 号以及后面的字符。这里的 # 和 css 里的 # 是一个意思。hash 也称作锚点,本身...
  • 众所周知,vue-router有两种模式,hash模式和history模式,这里来谈谈两者的区别hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件 window.onhashchange = function(event){ console.log...

空空如也

空空如也

1 2 3 4 5 ... 14
收藏数 279
精华内容 111
关键字:

hash和history的区别