vue-router中的两种路由模式的区别

由 admin 发布

在vue-router中我们会去配置路由模式:

  • hash(哈希)
  • history(历史)

那么这两种模式有什么区别和优缺点呢,我们一起来探讨一下。

hash模式

简述

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

window.onhashchange = function(event) {
    console.log(event.oldURL, event.newURL);
    let hash = loaction.hash  //通过location对象来获取hash地址
    console.log(hash)    // "#/notebooks/260827/list"  从#号开始
}

因为hash发生变化的url都会被浏览器记录下来,从而你会发现浏览器的前进后退都可以用。这样一来,尽管浏览器没有请求服务器,但是页面状态和url一一关联起来。

优点

  • 后面 hash 值的变化,并不会导致浏览器向服务器发出请求,浏览器不发出请求,也就不会刷新页面。
  • 不需要配置即可使用

缺点

  • 在地址栏中会有一个#号,影响美观。

history模式

简述

随着history api的到来,前端路由开始进化了,前面的hashchange,你只能改变#后面的url片段,而history api则给了前端完全的自由。history api可以分为两大部分,切换和修改。

切换历史状态

包括back,forward,go三个方法,对应浏览器的前进,后退,跳转操作。

在谷歌浏览器前进后退上长按鼠标,会出来所有当前窗口的历史记录,从而可以跳转(也许叫跳更合适)。

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

修改历史状态

因为HTML5标准发布,多了两个 API,pushState()replaceState()。通过这两个 API

(1)可以改变 url 地址且不会发送请求

(2)不仅可以读取历史记录栈,还可以对浏览器历史记录栈进行修改

这两个方法接收三个参数:stateObj,title,url

window.history.pushState(stateObject, title, URL)
window.history.replaceState(stateObject, title, URL)

除此之外,还有popState().当浏览器跳转到新的状态时,将触发popState事件

优点

  • 地址栏中的url比hash模式的要优雅

缺点

  • 需要与后端进行相应的配置才能使用

区别

  • hash模式下,你只能改变#后面的url片段。而pushState设置的新URL可以是与当前URL同源的任意URL
  • history模式则会将URL修改得就和正常请求后端的URL一样,如后端没有配置对应/user/id的路由处理,则会返回404错误

当用户刷新页面之类的操作时,浏览器会给服务器发送请求,所以这个实现需要服务器的支持,需要把所有路由都重定向到根页面。如果服务器中没有相应的响应或者资源,会分分钟刷出一个404来。

希望本文所述对大家有所帮助。


2 条评论

  1. xjl
    xjl · 2020-09-01 17:09

    nice

  2. ntbc
    ntbc · 2020-08-19 09:30

    购买快递单号,选单号无忧网www.dh5u.com

发表评论