前端路由模式hash和history

  1. hash模式
    hash模式的原理是依据window对象的onhashchange事件进行监听,它的特点是:虽然hash路径出现在URL中,但是不会出现在HTTP请求中,对后端完全没有影响,因此改变hash值不会重新加载页面。
    window.onhashchange = function(e){
          console.log(e);
    }

    打印出来的结果

    可以通过location.hash获得浏览器url路径中的#部分内容,上图是#bvc,
    如果想获取#后面的内容可通过location.hash.slice(1),上图是bvc

  2. history模式
    利用了HTML5 History Interface中新增的pushState()replaceState()方法,这两个方法应用于浏览器的历史记录栈,在当前已有的back、forward、go的基础上,他们提供了对当前浏览器进行修改的功能,只是当它们被修改时,虽然浏览器的URL发生
    了变化,但是不会立即向后端服务器发送请求,但是如果点击刷新,就会重新向后端服务器发送请求。
  3. 使用场景
    一般情况下,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属性供后续使用
    但是通过URL向后端发起HTTP请求的时候,history,hash具有以下区别
    *hash模式下,只有#符号之前的内容才会包含在请求中被发送到后端,也就是说虽然后端没有对路由全覆盖,但是不会返回404错误
    *history模式下,前端的URL必须和向发送请求后端URL保持一致,否则会报404错误
posted @ 2018-09-07 14:40  keep_one_more_time  阅读(...)  评论(...编辑  收藏