精华内容
下载资源
问答
  • vue路由两种模式

    千次阅读 2020-04-25 21:59:03
    hash与history 对于Vue 这类渐进式前端开发框架,为了构建SPA(单页面...一、为了达到这个目的,浏览器提供了以下两种支持: 1、hash ——即地址栏URL中的#符号(此hsah 不是密码学里的散列运算)。 比如这个URL:h...

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

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

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

    window.onhashchange = function(event){
         console.log(event.oldURL, event.newURL);
         let hash = location.hash.slice(1); 
         document.body.style.color = hash;
    }
    

    2、history ——利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。(需要特定浏览器支持) 这两个方法应用于浏览器的历史记录站,在当前已有的back、forward、go 的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改是,虽然改变了当前的URL,但你浏览器不会立即向后端发送请求。 history模式,会出现404 的情况,需要后台配置。

    history.pushState({color:'red'}, 'red', 'red')
    history.back();
    setTimeout(function(){
         history.forward();
     },0)
    window.onpopstate = function(event){
         console.log(event.state)
         if(event.state && event.state.color === 'red'){
               document.body.style.color = 'red';
          }
    }
    

    通过pushstate把页面的状态保存在state对象中,当页面的url再变回这个url时,可以通过event.state取到这个state对象,从而可以对页面状态进行还原,这里的页面状态就是页面字体颜色,其实滚动条的位置,阅读进度,组件的开关的这些页面状态都可以存储到state的里面。

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

    二、404 错误

    1、hash模式下,仅hash符号之前的内容会被包含在请求中,如 http://www.abc.com, 因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回404错误;

    2、history模式下,前端的url必须和实际向后端发起请求的url 一致,如http://www.abc.com/book/id 。如果后端缺少对/book/id 的路由处理,将返回404错误。

    路由模式切换代码:
    export default new Router({
    //路由模式:hash(默认),history模式
        mode: 'history',
    //修改路由高亮样式,默认值为'router-link-active'
        linkActiveClass: 'active'
    //路由规则
        routes:[
            {
                path:'/',
                name:'index',
                component:'Index'
            }
        ],
    })
    

    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

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

    hash 就是指 url 尾巴后的 # 号以及后面的字符,history没有底带#,外观上比hash 模式好看些
    原理的区别(原理)
    hash 能兼容到IE8, history 只能兼容到 IE10;
    由于 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变化

    history模式
    利用了HTML5 History Interface中新增的pushState()和replaceState()方法,这两个方法应用于浏览器的历史记录栈,在当前已有的back、forward、go的基础上,他们提供了对当前浏览器进行修改的功能,只是当它们被修改时,虽然浏览器的URL发生
    了变化,但是不会立即向后端服务器发送请求,但是如果点击刷新,就会重新向后端服务器发送请求。
    使用场景
    一般情况下,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 存在的意义。前端路由的核心,就在于 —— 改变视图的同时不会向后端发出请求。

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

    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 只是利用了这两个特性(通过调用浏览器提供的接口)来实现前端路由。

    如何使用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 后回车,或者刷新(重启)浏览器的时候。

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

    展开全文
  • 大家都知道vue-router有两种模式,hash模式和history模式,这里来谈谈vue-router中的hash和history两种模式的区别。感兴趣的朋友一起看看吧
  • Vue两种路由模式

    2021-07-29 19:32:06
    vue-router路由对象中,路由两种模式: hash 和 history,而默认的是hash模式 hash路由 监听路由的变化:onhashchange事件,只有#后面的地址发生变化,可以在window对象上监听这个事件 history路由 前面的...

    在vue-router路由对象中,路由有两种模式: hash 和 history,而默认的是hash模式

    hash路由

    • 监听路由的变化:onhashchange事件,只有#后面的地址发生变化,可以在window对象上监听这个事件

    history路由

    前面的hashchange,你只能改变#后面的url片段,而history api则给了前端完全的自由
    history api可以分为两大部分,切换和修改.

    切换历史状态:包括back,forward,go三个方法.

    修改历史状态:包括了history.pushState(),history.replaceState()两个方法

    展开全文
  • Vue路由两种模式

    2021-03-03 15:50:33
    后端路由 1、后端渲染:jsp-java server page 后端编写jsp文件代码,包含html+css+java,java代码的作用是从数据库中读取数据,并且将它动态地放在页面中。当浏览器去请求时,后端会返回已经处理好的完整的页面给...

    后端路由

    1、后端渲染:jsp-java server page

    后端编写jsp文件代码,包含html+css+java,java代码的作用是从数据库中读取数据,并且将它动态地放在页面中。当浏览器去请求时,后端会返回已经处理好的完整的页面给前端显示。所以早期的网站开发整个HTML页面是由服务器来渲染的,服务器直接生产渲染好的对应的HTML页面,返回给客户端进行展示。

    2、后端路由

    后端处理url和页面之间的映射关系

    • 一个页面有自己对应的网址,也就是url
    • url会发送到服务器,服务器会通过正则对该url进行匹配,并且最后交给一个Controller进行处理
    • Controller进行各种处理,最终生成HTML或者数据,返回给前端
    • 这就完成了一个IO操作

    3、后端路由缺点

    • 开发的页面模块需要后端人员来编写和维护
    • 如果前端人员(在那时可能是指写页面的人吧,和现在理解的前端人员不同)需要开发页面,则需要通过PHP和java等语言来编写页面代码
    • HTML代码和数据以及一些逻辑处理会混在一起,编写和维护都十分困难

    前后端分离阶段

    后端只负责提供数据,不参与其他任何阶段的内容

    在这个阶段中,浏览器中输入一个url,会向静态资源服务器发起请求,静态资源服务器会返回html+css+js,js代码是由浏览器执行的,执行的过程中会发送ajax请求,这个请求是向后端发送api请求获取数据,返回后前端在通过js代码创建div等dom,与数据拼接起来再渲染到页面上

    1、前端渲染

    浏览器中显示的网页中大部分内容,都是都前端写的js代码在浏览器中执行,最终渲染出来的网页。

    2、前端路由阶段

    • 随着ajax的出现,有了前后端分离的开发模式
    • 后端只提供api来返回数据,前端通过ajax获取数据,并且可以通过js将数据渲染到页面中
    • 前后端责任清晰,后端专注在数据上,前端专注在交互和可视化上
    • 当移动端出现后(IOS / Android)出现后,后端不需要进行任何处理,依然使用之前的一套api

    前端路由阶段-SPA页面

    单页面富应用(signal page application),整个网站只有一个html页面,谁在管理目前的映射关系?

    1、前端路由

    前端处理url和页面之间的映射关系,一个url对应一个组件

    2、单页面富应用

    • 在前后端分离的基础上加了一层前端路由
    • 前端来维护一套路由规则

    3、前端路由的核心

    • 改变url,页面不进行整体刷新
    • 如何实现呢?请看下面

    Vue路由的两种模式

    在本地启动的情况下,两种模式除了在路径上hash模式在path之前多了 #/,似乎没有什么差别,打包代码放上服务器,打开一个不存在的路径,hash模式下会重定向到not-found页面,但是history模式会直接返回404,如果找不到的话,这个是需要后端配合处理的。

    history 模式

    在 HTML5 之前,浏览器就已经有了 history 对象。但在早期的 history 中只能用于多页面的跳转。现在history采用HTML5的新特性;且提供了两个新方法:pushState(),replaceState()可以对浏览器历史记录栈进行修改,以及popState事件的监听到状态变更。

    history 在修改 url 后,虽然页面并不会刷新,但我们在手动刷新,或通过 url 直接进入应用的时候, 服务端是无法识别这个 url 的。因为我们是单页应用,只有一个 html 文件,服务端在处理其他路径的 url 的时候,就会出现404的情况。 所以,如果要应用 history 模式,需要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回单页应用的 html 文件。

    hash 模式

    这里的 hash 就是指 url 后的 # 号以及后面的字符。比如说 “www.baidu.com/#hashhash” ,其中 “#hashhash” 就是我们期望的 hash 值。

    由于 hash 值的变化不会导致浏览器像服务器发送请求重加载页面,对服务端安全无用,但是hash 的改变会触发 hashchange 事件,浏览器的前进后退也能对其进行控制,所以在 H5 的 history 模式出现之前,基本都是使用 hash 模式来实现前端路由。

    链接

    https://juejin.cn/post/6844903890278694919

    https://www.bilibili.com/video/BV15741177Eh?p=105

    展开全文
  • Vue种路由模式

    2020-10-27 12:12:58
    对于本地开发,俩种模式没有太大的区别,要是放在测试环境或是生产环境 在history模式下,刷新页面,可能会导致页面找不到,页面显示404的错误。 这时候就需要默认hash模式了。 至于原理,我就不在这详细说明.

    浏览器对页面的访问是无状态的,所以我们在切换不同的页面时都会重新进行请求。

    而实际使用 vue 和 vue-router开发就会明白,在切换页面时是没有重新进行请求的,使用起来就好像页面是有状态的,这是什么原因呢???

    这其实是借助了浏览器的History API 来实现的,这样可以使得页面跳转而不刷新,页面的状态就被维持在浏览器中了。

    vue-router中默认使用的是hash模式,也就是URL中带有#号

    可以使用mode属性修改值

    import Vue from 'vue'
    import Router from 'vue-router'
    import Main from '@/components/Main'
    Vue.use(Router)
    
    export default new Router({
      mode: 'history',
      routes: [
        {
          path: '/',
          component: Main
        }
      ]
    })
    

    这样URL中的#号就被去除了

    俩种模式的区别

    1,hash模式

    hash模式背后的原理是 onhashchange 事件,可以在window对象上监听这个事件

    更关键的一点是,hash发生变化的url都会被浏览器记录下来,浏览器的前进后退都可以用,尽管浏览器没有请求服务器,但是页面状态和url一一关联起来

    2,history路由

    随着 history api的到来,前端路由开始进化了,hash模式下的onhashchange只能改变#后面url片段,而history api则给了前端完全的自由

    history api 可以切换和修改
    切换:back,forward,go三个方法
    修改:pushState,replaceState

    但它有个毛病,怕刷新,刷新就是实实在在地去请求服务器

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

    popstate实现history路由拦截,监听页面返回事件
    当活动历史记录条目更改时,将触发popstate事件

    展开全文
  • vue两种路由模式原理

    千次阅读 2018-08-08 21:06:22
    2、history模式:根据history api中的pushState,replaceState个方法。 通过pushstate把页面的状态保存在state对象中,当页面的url再变回这个url时,可以通过event.state取到这个state对象,从而可以对页面状态...
  • 1、大家都知道vue是一单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容 优点: 良好的交互...
  • Vue路由机制主要是通过两种模式实现的 第一种模式是hash模式 第二种是H5的history模式 这是默认的hash模式的路由: 改成history模式后 const router = new VueRouter({ mode:"history", routes }) ...
  • Vue两种路由模式:hash,history ** (1)hash模式 通过监听路由的变化实现, 如下代码.路由中带着#,变化的也都是#后面的值 window.onhashchange = function(event) { console.log(event.oldURL, event.newURL); let ...
  • vue-router两种模式

    千次阅读 2018-12-06 15:15:17
    说起vue-rouer,不得不提的一个概念是前端路由,要想深入理解前端路由,不得不了解路由、后端路由、前端路由和后端路由的区别、多页面应用、单页面应用这些概念。 一、捋一捋概念呀先 单页面应用(SPA),通俗一点...
  • 主要介绍了vue-router实现原理及两种模式分析,给大家介绍了vue-router hash模式与history模式不同模式下处理逻辑,需要的朋友可以参考下
  • 配置路由模式: hash : 使用 URL hash 值来作路由。支持所有浏览器,包括不支持 HTML5 History Api 的浏览器。 history : 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。 abstract : 支持所有 ...
  • VUE路由的hash模式与history模式的区别

    千次阅读 2019-01-04 14:47:18
    hash模式url带#号,history模式不带#号。...在hash模式下,前端路由修改的是#中的信息,而浏览器请求时是不带它玩的,所以没有问题.但是在history下,你可以自由的修改path,当刷新时,如果服务器中没有相...
  • Vue的三种路由模式

    千次阅读 2021-03-03 19:31:20
    这里要讲vue-router的路由模式,首先要了解的一点就是路由是由多个URL组成的,使用不同的URL可以相应的导航到不同的位置。如果有进行过服务器开发或者对http协议有所了解就会知道,浏览器中对页面的访问是无状态的,...
  • vue路由模式

    2020-06-15 23:54:05
    vue路由模式 1、vue-router 路由模式有几种? 实际上存在三种模式: Hash: 使用URL的hash值来作为路由。支持所有浏览器。 History: 以来HTML5 History API 和服务器配置。参考官网中HTML5 History模式 Abstract: ...
  • 一个人到底可以懒到什么程度?我感觉可能是无极限吧! VUE路由 vue的路由干啥用的? ... ...为了减少页面的刷新,每次切换浏览器都...知道了路由是干啥的,那么怎么实现这种功能呢,vue提供了两种实现路由的模式:hash模式.
  •   大家都知道在vueRouter中,我们可以通过mode来改变路由模式,可选为hash和history。 hash   hash指的是location里面#以及它后面的部分。也被成为锚点,通常用来定位,它的改变不会造成页面的刷新。   我们...
  • 前端路由主要有两种实现方法: Hash 路由 History 路由 先来看看这两种方法的实现原理。 接着我们将用它们来简单实现一个自己的前端路由。 前端路由 Hash 路由 url 的 hash 是以 # 开头,原本是用来作为锚点,...
  • vue路由两种状态

    2020-10-30 14:59:39
    vue路由两种状态 1、默认的是hash模式,表现形式(www.abc.com/#/list);即在url中有个# 这个#前面是域名,#后面是位置;当页面变化的时候改变#后面的值,切换页面的位置,达到url不改变,页面不刷新,即单页面...
  • 1.直观区别: hash模式url带#号,history模式不带#号。 2.深层区别: ...功能也有区别,比如我们在开发app的时候有分享页面,那么这个分享出去的页面就是用vue或是react做的, 咱们把这个页面分享到第三方
  • 路由两种方式:hash和history模式 hash模式:浏览器url中#后面的内容,包含#。hash是URL中的锚点,代表 的是网页中的一个位置,单单改变#后的部分, 浏览器只会加载相应位置的内容,不会重新加载页面。 history...
  • vue-router 默认 hash 模式,还有一是history模式。 hash模式 hash模式的工作原理是hashchange事件,可以在window监听hash的变化。我们在url后面随便添加一个#xx触发这个事件。 window.onhashchange = f...
  • vue为了构建 单页面应用SPA,需要引用vue-router,其核心是:改变视图的同时不会向后端发起请求。 1、hash模式 特点: 地址栏中的 url 带锚点,“#”,如:http://www.abc.com/#/hello,其中hash值为:#/hello...
  • 对于Vue这类渐进式前端开发框架,为了构建SPA(单页面应用),需要引入前端路由系统,这也就是Vue-Router存在的意义。前端路由的核心,就在于——改变试图的同时不会向后端发出请求。 hash模式: 有 /#/ 号的URL 为...
  • 这些东西在多页应用上可能考虑的不是太多,但是在vue单页应用上就不得不考虑了。使用vue-cli搭建好脚手架,然后用vue-router提供的两种路由来实现导航栏。写一个简单的demo,效果如下: hash模式vue-cli...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,063
精华内容 6,025
关键字:

vue路由的两种模式

vue 订阅