tangyuxian
文章71
标签34
分类5
vue-路由两种模式及其区别

vue-路由两种模式及其区别

vue-router 有 3 种路由模式:hash、history、abstract。

总览

1) hash模式:hash + hashChange

特点:hash虽然在URL中,但不被包括在HTTP请求中;用来指导浏览器动作,对服务端安全无用,hash不会重加载页面。通过监听 hash(#)的变化来执行js代码 从而实现 页面的改变。

核心代码:

window.addEventListener(‘hashchange‘,function(){

  self.urlChange()

})

特点:

  1. hash 虽然出现在 url 中,但不会被包括在 http 请求中,它是用来指导浏览器动作的,对服务器端完全无用,因此,改变 hash 不会重新加载页面。

  2. 可以为 hash 的改变添加监听事件:

    window.addEventListener("hashchange",funcRef,false)
    
  3. 每一次改变 hash(window.localtion.hash),都会在浏览器访问历史中增加一个记录。

    利用 hash 的以上特点,就可以来实现前端路由”更新视图但不重新请求页面”的功能了。

    HashHistory 拥有两个方法,一个是 push, 一个是 replace

    即:HashHistory.push()HashHistory.replace()

2) history模式:historyApi + popState

HTML5推出的history API,由pushState()记录操作历史,监听popstate事件来监听到状态变更;

因为 只要刷新 这个url(www.ff.ff/jjkj/fdfd/fdf/fd)就会请求服务器,然而服务器上根本没有这个资源,所以就会报404,解决方案就 配置一下服务器端。

 History interface 是浏览器历史记录栈提供的接口,通过back()、forward()、go()等方法,我们可以读取浏览器历史记录栈的信息,进行各种跳转操作。

 从 HTML5开始,History interface 提供了2个新的方法:pushState()、replaceState() 使得我们可以对浏览器历史记录栈进行修改:

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

​ stateObject:当浏览器跳转到新的状态时,将触发 Popstate 事件,该事件将携带这个 stateObject 参数的副本

    title:所添加记录的标题

     url:所添加记录的 url``

    这2个方法有个共同的特点:当调用他们修改浏览器历史栈后,虽然当前url改变了,但浏览器不会立即发送请求该url,这就为单页应用前端路由,更新视图但不重新请求页面提供了基础

  1. push

    与hash模式类似,只是将window.hash改为history.pushState

  2. replace

    与hash模式类似,只是将window.replace改为history.replaceState

  3. 监听地址变化

    在HTML5History的构造函数中监听popState(window.onpopstate)

说明:

  1. hash: 使用 URL hash 值来作路由。支持所有浏览器,包括不支持 HTML5 History Api 的浏览器;

  2. history : 依赖 HTML5 History API 和服务器配置。具体可以查看 HTML5 History 模式;

  3. abstract : 支持所有 JavaScript 运行环境,如 Node.js 服务器端。如果发现没有浏览器的 API,路由会自动强制进入这个模式.


参考文档:博客园文章:Vue Router 路由实现原理

本文作者:tangyuxian
本文链接:https://www.tangyuxian.com/2021/03/03/%E5%89%8D%E7%AB%AF/vue/vue-%E8%B7%AF%E7%94%B1%E4%B8%A4%E7%A7%8D%E6%A8%A1%E5%BC%8F%E5%8F%8A%E5%85%B6%E5%8C%BA%E5%88%AB/
版权声明:本文采用 CC BY-NC-SA 3.0 CN 协议进行许可