精华内容
下载资源
问答
  • Vue-router 中hash模式和history模式的关系 在vue的路由配置中有mode选项 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的 mode:”hash”;  mode:”history”;  hash模式和history模式的...
  • 主要介绍了一文了解vue-router之hash模式和history模式,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • Vue的路由实现:hash模式 和 history模式hash 模式(Vue-router默认)示例:hash模式优缺点history 模式示例:history 模式的优缺点:传统路由跟前端路由不同 前端路由有两种模式:hash 模式和 history 模式,接下来...

    你越是认真生活,你的生活就会越美好——弗兰克·劳埃德·莱特
    《人生果实》经典语录

    前端路由有两种模式:hash 模式和 history 模式,接下来分析这两种模式的实现方式和优缺点。

    Vue官方文档-HTML5 History模式

    为了方便演示,需全局安装 light-server

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

    hash 模式(Vue-router默认)

    hash 模式是一种把前端路由的路径用井号 #拼接在真实 URL 后面的模式。
    井号 #后面的路径发生变化时,浏览器并不会重新发起请求,而是会触发 hashchange 事件

    示例:

    我们新建一个 hash.html文件,内容为:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>hash</title>
    </head>
    <body>
      <a href="#/a">A页面</a>
      <a href="#/b">B页面</a>
      <div id="app"></div>
    
      <script>
        function render() {
          const app = document.querySelector('#app')
          app.innerHTML = window.location.hash
        }
        window.addEventListener('hashchange', render)
      </script>
    </body>
    </html>
    

    在目录下运行:

    light-server -s .  --port 3000
    

    然后打开 http://localhost:3000/hash.html查看效果。

    在上面的例子中,我们利用 a 标签设置了两个路由导航,把 app 当做视图渲染容器,当切换路由时触发视图容器更新,这其实就是大多数前端框架哈希路由的实现原理。

    hash模式优缺点

    优点

    • 只需要前端配置路由表, 不需要后端的参与
    • 兼容性好, 浏览器都能支持
    • hash值改变不会向后端发送请求, 完全属于前端路由

    缺点

    • hash值前面需要加#, 不符合url规范,也不美观

    history 模式

    history API 是 H5 提供的新特性,允许开发者直接更改前端路由,即更新浏览器 URL 地址不重新发起请求(将url替换并且不刷新页面)。

    示例:

    我们新建一个 history.html,内容为:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>history</title>
    </head>
    <body>
      <a href="javascript:toA();">A页面</a>
      <a href="javascript:toB();">B页面</a>
      <div id="app"></div>
      <script>
        function render() {
          console.log('render')
          app.innerHTML = window.location.pathname
        }
        function toA() {
          history.pushState({}, null, '/a')
          render()
        }
        function toB() {
          history.pushState({}, null, '/b')
          render()
        }
        window.addEventListener('popstate', render)
      </script>
    </body>
    </html>
    

    在目录下运行:

    light-server -s . --historyindex '/history.html' --port 3000
    

    然后打开 http://localhost:3000/history.html查看效果。

    history API 提供了丰富的函数供开发者调用,我们不妨把控制台打开,然后输入下面的语句来观察浏览器地址栏的变化:

    history.replaceState({}, null, '/b') // 替换路由
    history.pushState({}, null, '/a') // 路由压栈 替换当前地址 被替换地址进入访问历史
    history.back() // 返回
    history.forward() // 前进
    history.go(-2) // 后退2次
    

    上面的代码监听了 popstate 事件,该事件能监听到

    • 用户点击浏览器的前进和后退操作
    • 手动调用 history 的 backforwardgo方法

    监听不到

    • history 的 pushStatereplaceState方法

    这也是为什么上面的 toA 和 toB 函数内部需要手动调用 render 方法的原因。
    另外,大家可能也注意到 light-server 的命令多了 --historyindex '/history.html'参数,这是干什么的呢?

    浏览器在刷新的时候,会按照路径发送真实的资源请求,如果这个路径是前端通过 history API 设置的 URL,那么在服务端往往不存在这个资源,于是就返回 404了。
    上面的参数的意思就是如果后端资源不存在就返回 history.html 的内容。(试了没反应,知道有这种用法即可)

    因此在线上部署基于 history API单页面应用的时候,一定要后端配合支持才行,否则会出现大量的 404
    以最常用的 Nginx 为例,只需要在配置的 location / 中增加下面一行即可:

    try_files $uri /index.html
    

    history 模式的优缺点:

    优点:

    • 符合url地址规范, 不需要#, 使用起来比较美观

    缺点:

    • 兼容性不如 hash,且需要服务端支持重定向,否则一刷新页面就404了
    • 兼容性比较差, 利用了 HTML5 History对象中新增的 pushState() 和 replaceState() 方法,需要特定浏览器的支持.

    传统路由跟前端路由不同

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

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

    Vue源码学习目录

    点击回到 Vue源码学习完整目录


    谢谢你阅读到了最后~
    期待你关注、收藏、评论、点赞~
    让我们一起 变得更强

    展开全文
  • vue-router两种模式:hash模式和history模式

    万次阅读 多人点赞 2018-05-06 11:11:22
    为了构建SPA,vue引入了前端路由系统vue-router。...1. hash模式(vue-router默认hash模式hash模式背后的原理是onhashchange事件。 window.onhashchange=function(){ let hash=location.hash.slice(1); do...

    为了构建SPA,vue引入了前端路由系统vue-router。
    vue-route有两种模式:history模式和hash模式

    1. hash模式(vue-router默认hash模式)

    hash模式背后的原理是onhashchange事件

    window.onhashchange=function(){
     let hash=location.hash.slice(1);
     document.body.style.color=hash;
    }

    localtion是js里管理地址栏的内置对象,是window对象的一部分,可通过window.localtion访问,在w3cshool里的详细介绍)
    由于hash发生变化的url都会被浏览器记录下来,使得浏览器的前进后退都可以使用了,尽管浏览器没有亲求服务器,但是页面状态和url关联起来。后来人们称其为前端路由,成为单页应用标配。

    比如http://www.abc.com/#/index,hash值为#/indexhash模式的特点在于hash出现在url中,但是不会被包括在HTTP请求中,对后端没有影响,不会重新加载页面

    2.history模式

    history模式利用了HTML5 History Interface中新增的pushState()replaceState()方法。MDN相关介绍(需要特定浏览器支持)。这两个方法应用于浏览器的历史记录栈,提供了对历史记录进行修改的功能。只是当他们进行修改时,虽然修改了url,但浏览器不会立即向后端发送请求。
    当使用history模式时,url就像正常的url,例如http://abc.com/user/id相比hash模式更加好看。特别注意,history模式需要后台配置支持。如果后台没有正确配置,访问时会返回404。
    通过history api,我们丢弃了丑陋的#,但是有一个缺点,当刷新时,如果服务器中没有相应的相应或者资源,会分分钟刷出一个404来(刷新需要请求服务器)。所以history模式不怕前进,不怕后退,就怕刷新。

    3.hash模式和history模式对比

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

    不过,hash模式也有比history模式优势的地方

    • hash模式下,仅hash符号之前的url会被包含在请求中,后端如果没有做到对路由的全覆盖,也不会返回404错误。
    • history模式下,前端的url必须和实际向后端发起请求的url一致,如http://abc.com/user/id,后端如果没有对user/id的路由处理,将返回404错误。
      history模式官方文档

    4.应用场景

    对于一般的Vue+Vue-router+Webpack+XXX形式1的Web开发场景,用history模式即可,后端用Apach或Nginx进行路由的简单配置,同时搭配前端路由的404页面支持。

    相关文章

    展开全文
  • router的hash模式和history模式

    千次阅读 2019-04-02 15:01:17
    vue-router的hash模式是默认模式,history模式利用了history.pushState。 1.hash模式和history模式的区别 hash—— 即地址栏 URL 中的#符号(此 hash 不是密码学里的散列运算)。比如这个 URL:...

    vue-router的hash模式是默认模式,history模式利用了history.pushState。

    1.hash模式和history模式的区别

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

    2.pushState的使用

    pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL;而 hash 只可修改 # 后面的部分,因此只能设置与当前 URL 同文档的 URL;

    pushState() 设置的新 URL 可以与当前 URL 一模一样,这样也会把记录添加到栈中;而 hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中;

    pushState() 通过 stateObject 参数可以添加任意类型的数据到记录中;而 hash 只可添加短字符串;

    pushState() 可额外设置 title 属性供后续使用。

    3.项目的router模式修改

    展开全文
  • hash模式 和 history模式 众所周知,vue-router有两种模式,hash模式和history模式,这里来谈谈两者的区别。 hash模式特点 1.就是指 url 尾巴后的 # 号以及后面的字符, 请求的时候不会被包含在 http 请求中 只会...

    abstract模式

    适用于所有JavaScript环境,例如服务器端和Node.js. 如果没有浏览器API,路由器将自动强制进入此模式。

    hash模式 和 history模式

    众所周知,vue-router有两种模式,hash模式和history模式,这里来谈谈两者的区别。

    hash模式特点

    1.就是指 url 尾巴后的 # 号以及后面的字符, 请求的时候不会被包含在 http 请求中 只会携带#之前的,所以每次改变hash不会重新请求加载页面
    2.hash 改变会触发 hashchange 事件
    3.hash变化会被浏览器记录,浏览器的前进和后退都能用。
    3.能兼容到ie8

    history模式特点

    1.页面请求时会带上整个链接,所以后台需要做相对处理,不然返回404
    在这里插入图片描述

    2.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() {
    // 监听浏览器前进后退事件,pushState 与 replaceState 方法不会触发

    3.window.history.back(); // 后退
    window.history.forward(); // 前进
    window.history.go(-3); // 后退三个页面

    4.history 只能兼容到 IE10;

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

    展开全文
  • 主要介绍了基于vue hash模式微信分享#号的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue-router 中hash模式和history模式。 在vue的路由配置中有mode选项,最直观的区别就是在hash模式下的地址栏里的URL夹杂着‘#’号 ,而history模式下没有。vue默认使用hash。 mode:"hash"; mode:"history"; hash...
  • 由于hash模式下,带有“#”,导致微信分享的签证无效;当改成history的模式后,分享ok; 但是问题来了,history模式下相当操蛋: 刷新页面,页面报错404;这不是扯犊子吗?【不过这个问题,可以在后台解决,这里就不...
  • my-spa spa原生js实现,包括hash模式和history模式
  •     hash 模式与 history 模式的区别,这个也是面试常问的问题,不要小看这道题其实问到这里的时候那个面试官应该是个大牛,开发经验丰富,这个题其实就是考验你的开发经验是否属实。     小白回答: hash ...
  • 关于vue-router的历史模式和hash模式

    万次阅读 多人点赞 2020-04-07 15:38:57
    首先了解下 window.location对象 打开浏览器在控制台打印 路由在未交由前端管理之前都是后台控制 ...你请求a我就给你a,你请求不存在我就给你个404页面 ...vue-router就是只改变视图,...1、Hash模式: hash(#)是URL...
  • hash模式 和 history模式之间的区别

    千次阅读 2020-07-15 19:58:30
    1 hash模式url带#号,history模式不带#号。 history丢掉了#,操作中不怕前进和后退,就怕刷新,如果没有服务端的支持,刷新之后就会去请求服务器,由于找不到相应的支持响应或者资源,就会报出404页面。 hash模式下,...
  • 【前端路由】Vue-router 中hash模式和history模式的区别

    万次阅读 多人点赞 2018-09-08 15:53:20
    咱们今天说说VUE路由的hash模式与history模式的区别,这个也是面试常问的问题,不要小看这道题其实问到这里的时候那个面试官应该是个大牛,开发经验丰富,这个题其实就是考验你的开发经验是否属实。 咱们来看看小白...
  • 1. hash模式 比如在用超链接制作锚点跳转的时候,就会发现,url后面跟了"#id",hash值就是url中从"#"号开始到结束的部分。 hash值变化浏览器不会重新发起请求,但是会触发window.hashChange事件,假如我们在...
  • vue的路由hash模式 和 history模式 区别 1.直观区别: hash模式url带#号,history模式不带#号。 2.深层区别: hash模式url里面永远带着#号,我们在开发当中默认使用这个模式。 如果用户考虑url的规范那么就需要...
  • VUE中hash模式和history模式的区别

    千次阅读 2019-05-17 05:21:50
    Vue-router 中hash模式和history模式的关系 在vue的路由配置中有mode选项 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的 mode:"hash"; mode:"history"; 复制代码hash模式和history模式的不同...
  • vue-router 的 hash 模式与 history 模式

    千次阅读 2017-11-11 17:15:51
    vue-router 的 hash 模式与 history 模式提供两种模式的原因:vue 是渐进式前端开发框架,为了实现 SPA ,需要引入前端路由系统(vue-router)。前端路由的核心是:改变视图的同时不会向后端发出请求。为了达到这一...
  • hash模式 hash 模式的路由中带有 # 号 hash 模式通过 window.onhashchange 方法监听路由的修改 hash 模式在页面刷新的时候,发送的请求 url 是不带 # 后面的内容的 hash 模式可以兼容部分低版本的浏览器 hash 模式...
  • 今天小编就为大家分享一篇vue vue-Router默认hash模式修改为history需要做的修改详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • hash 模式: #后面 hash 值的变化,不会导致浏览器向服务器发出请求,浏览器不发出请求,就不会刷新页面通过监听 hashchange 事件可以知道 hash 发生了哪些变化,然后根据 hash 变化来实现更新页面部分内容的操作。 ...
  • hash模式 例子:http://www.example.com/index.html#location1 #是一个位置标识符,利用a标签的herf属性可以进行页面内位置的跳转。 http请求不会发送#后面的字符串到服务器,如果要发送,要将#转码为%23。 改变#...
  • 1 概述 前端路由是指,不同的url展示不同的...hash模式:http://localhost/Day/hash.html#/home 存在一个 # 符号,和普通的url相比有些丑 history模式:http://localhost/home 这和普通的URL没有区别,非常好看 那...
  • VUE路由的hash模式与history模式的区别

    千次阅读 2019-01-04 14:47:18
    hash模式url带#号,history模式不带#号。 通过history api,我们丢掉了丑陋的#,但是它也有个问题:不怕前进,不怕后退,就怕刷新,f5,(如果后端没有准备的话),因为刷新是实实在在地去请求服务器的,不玩虚的。 ...
  • 前端路由history与hash模式的简单实现 npm install 安装依赖 npm run server 开启本地服务器 修改static/index.js内的mode可查看对应mode的页面效果 在app.js内已有history模式对应的后端代码, 在history模式下刷新...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 258,242
精华内容 103,296
关键字:

hash模式