精华内容
下载资源
问答
  • hash模式和history模式

    2020-03-08 10:30:08
    hash模式和history模式: hash模式: hash模式url里面永远带着#号,我们在开发当中默认使用这个模式。 history模式history模式没有#号,是个正常的url适合推广宣传。 考虑url的规范那么就需要使用history模式...

    hash模式和history模式:

    hash模式:

    1. hash模式url里面永远带着#号,我们在开发当中默认使用这个模式

    history模式:

    1. history模式没有#号,是个正常的url适合推广宣传
    2. 考虑url的规范那么就需要使用history模式因为当然其功能也有区别,在开发app的时候有分享页面,这个分享出去的页面就是用vue做的,把这个页面分享到第三方的app里,有的app里面url是不允许带有#号的,所以要将#号去除那么就要使用history模式,history模式还有一个问题就是,做刷新操作,会出现404错误,那么就需要和后端人配合让他配置一下apache或是nginx的url重定向,重定向到你的首页路由上

    history模式使用:(在实例化路由对象的时候设置)

     

    history模式和hash模式的区别:

     

    展开全文
  • vue History 模式

    2020-11-23 13:51:18
    如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。 const router = new VueRouter({ mode: 'history', routes: [...] }) ...
    官方解释

    vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。
    如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

    const router = new VueRouter({
      mode: 'history',
      routes: [...]
    })
    

    当你使用 history 模式时,URL 就像正常的 url,例如 http://yoursite.com/user/id,也好看!

    不过这种模式要玩好,还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就不好看了。

    所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。

    缺点

    如官网所说,默认有vue 里面路由有两种显示模式是hash和history,默认是hash。
    当前端如官网所示添加了 mode:‘history’,
    缺点强制刷新会像真正的路由一样发起请求,返回404,所以要解决这个问题后端必须配置好
    配置参考: 点击.
    就是当后端检测到如果请求路径不匹配。后端直接重新渲染index页面。

    所以要玩好,就要配置好!

    展开全文
  • vue history模式

    2018-12-14 11:53:02
    言简意赅的来说,History模式就是去除掉浏览器地址栏的#号 vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。 如果不想要很丑的 hash,我们可以用...

    HTML5 History 模式

    言简意赅的来说,History模式就是去除掉浏览器地址栏的#号

    vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。

    如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

    如下代码所示:

    const router = new VueRouter({
      mode: 'history',
      routes: [...]
    })
    

    当你使用 history 模式时,URL 就像正常的 url,例如

    http://yoursite.com/user/id

    不过这种模式要玩好,还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就不好看了。

    所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。

    值得注意的一点!

    给个建议,因为这么做以后,你的服务器就不再返回 404 错误页面,因为对于所有路径都会返回 index.html 文件。为了避免这种情况,你应该在 Vue 应用里面覆盖所有的路由情况,然后在给出一个 404 页面。

    如:

    const router = new VueRouter({
      mode: 'history',
      routes: [
        { path: '*', component: NotFoundComponent }
      ]
    })
    
    展开全文
  • Vue-router 中hash模式和history模式的区别

    万次阅读 多人点赞 2019-02-19 10:02:11
    Vue-router 中hash模式和history模式的区别 在通过vue-cli创建项目的时候,出现: 于是,去Google一遍。。 vue-router的model有两种模式:hash模式和history模式。 Vue-router 中hash模式和history模式的关系 ...

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

    在通过vue-cli创建项目的时候,出现:
    在这里插入图片描述
    于是,去Google一遍。。
    vue-router的model有两种模式:hash模式和history模式。

    Vue-router 中hash模式和history模式的关系

    hash模式和history模式的不同

    最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的

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

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

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

    使用场景

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

    如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成URL 跳转而无须重新加载页面。

    另外,根据 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 后回车,或者刷新(重启)浏览器的时候。

    个人在接入微信的一个活动开发过程中 开始使用的hash模式,但是后面后端无法获取到我#后面的url参数,于是就把参数写在#前面,但是讨论后还是决定去掉这个巨丑的#

    于是乎改用history模式,但是开始跑流程的时候是没问题,但是后来发现跳转后刷新或者回跳,会报一个404的错误,找不到指定的路由,最后后端去指向正确的路由 加了/hd/xxx 去匹配是否有这个/hd/{:path} 才得以解决

    总结

    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 依赖的页面。”

    3 结合自身例子,对于一般的 Vue + Vue-Router + Webpack + XXX 形式的 Web 开发场景,用 history 模式即可,只需在后端(Apache 或 Nginx)进行简单的路由配置,同时搭配前端路由的 404 页面支持。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    转载自:https://www.jb51.net/article/144341.htm

    展开全文
  • html History 模式

    2019-09-06 22:31:03
    最近看到vue-router的HTML5 History 模式路由的实现,然后顺便又去研究了一下HTML5 的 History,以下是自己的一些理解,顺便用jquery写 一个实现类似vue-router里面HTML5 History 模式路由器,以达到练练手,熟悉熟悉...
  • vue history 模式

    千次阅读 2019-08-28 15:45:35
    history模式打包页面空白处理 1、首先判断产线项目是否放在域名根目录下 在router/index.js文件中,添加history模式 如果项目不在根目录下,比如产线项目根目录为 http://www.baidu.com/project-name/ ...
  • 路由hash history模式

    千次阅读 2020-08-31 15:37:30
    1.hash 模式 // 浏览器监听hash window.addEventListener("hashchange", val => { console.log(val) }) // 修改hash值 ...2.history模式 // 浏览器监听history window.addEventListener("popstate",..
  • 主要介绍了一文了解vue-router之hash模式和history模式,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 如上图所示非常简单,只需要在文件router下的index.js里加上一个mode:'history’即可把hash模式改为history模式.这个时候url上面的#号就不会再存在了,这样就把url成功把hash模式改成history了
  • hash模式和history模式的区别 对于vue这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义。前端路由的核心,就在于 —— 改变视图的同时不会向后端发出...
  • HTML5 history 模式

    2020-09-07 21:24:10
    因为vue-router默认使用hash模式,这会在URL中使用"#“来标识要跳转的目标的路径,我们可以使用路由的history模式来使”#"消失,这种模式利用history.pushStateAPI来完成URL的跳转而无须重新加载页面。 修改router...
  • 最近看到vue-router的HTML5 History 模式路由的实现,然后顺便又去研究了一下HTML5 的 History,以下是自己的一些理解,顺便用jquery写 一个实现类似vue-router里面HTML5 History 模式路由器,以达到练练手,熟悉熟悉...
  • History 模式 https://music.163.com/playlist/3102961863 原理的区别 Hash模式是基于锚点,以及onhashchange事件 Hostory模式是基于HTML5中的History API History.pushState() IE10以后才支持 ...
  • 在vue-router中有两种模式:hash模式和history模式 hash模式 hash模式:是用hash方式来模拟一个完整URL,其中URL中hash值即自带#之后值, hash值发生变化时,页面不会重新加载,可以通过onhashchange事件来监听hash...
  • vue 使用history模式

    2019-07-30 17:48:37
    最近做了一个vue项目,需要分享功能,分享时需要把当前链接通过短链...所以想到了用history模式,改成history模式后出现页面空白 个人总结了一下使用history模式需要以下步骤: 1.修改router.js 2.修改vue.config.js ...
  • 前端之history模式

    2020-07-31 09:40:46
    前端之history模式 1.history模式 在vue-router中默认的路由模式采用的是hash模式,也就是 “#/路由地址”,而这里的"#“有可能会和项目当中的锚点地址冲突,如果我们启用history路由模式,就不会看到”#",只剩下"/路由...
  • hash模式与history模式 随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行。 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下...
  • router的hash模式和history模式

    千次阅读 2019-04-02 15:01:17
    vue-router的hash模式是默认模式,history模式利用了history.pushState。 1.hash模式和history模式的区别 hash—— 即地址栏 URL 中的#符号(此 hash 不是密码学里的散列运算)。比如这个 URL:...
  • vue里面 将hash模式变成history模式是不是在router/index.js 里面加上mode:'history',这么一段代码,但是我加上去了并没有成功改变模式#号还是存在,我使用的脚手架是4.46的不知道还要做什么改动才能进到history...
  • 一: 什么是hash 和 history 模式? hash模式: hash模式的原理是onhashchange事件,可以通过window对象来监听该事件 在hash模式下,当url发生变化时,浏览器会记录下来,因此前进后退按钮都可以使用 因此...
  • vue-router文档中只有关于Apache,nginx等配置的说明,同过查询找到了以下方法解决tomcat下history模式的问题。 在web.xml中输入以下内容 <?xml version="1.0" encoding="ISO-8859-1"?> <web-app xmlns=...
  • Vue路由History模式分析

    2020-10-10 18:14:54
    Vue路由History模式分析 Vue-router是Vue的核心组件,主要是作为Vue的路由管理器,Vue-router默认hash模式,通过引入Vue-router对象模块时配置mode属性可以启用history模式。 描述 Vue-router的hash模式使用URL的...
  • HTML5 History 模式

    2020-03-13 20:38:59
    vue-router 默认 hash 模式 ...如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。 const router = new VueRouter({ mode: '...
  • my-spa spa原生js实现,包括hash模式和history模式
  • Vue的路由实现:hash模式 和 history模式hash 模式(Vue-router默认)示例:hash模式优缺点history 模式示例:history 模式的优缺点:传统路由跟前端路由不同 前端路由有两种模式:hash 模式和 history 模式,接下来...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,687
精华内容 1,474
关键字:

history模式