转自: https://juejin.im/post/5b31a4f76fb9a00e90018cee

hash 前端路由,无刷新

history 会去请求接口

history 在刷新页面时,如果服务器中没有相应的响应或资源,就会出现404。因此,如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面

hash 模式下,仅 # 之前的内容包含在 http 请求中,对后端来说,即使没有对路由做到全面覆盖,也不会报 404

vue-router提供两种模式的原因:

vue 是渐进式前端开发框架,为了实现 SPA ,需要引入前端路由系统(vue-router)。

前端路由的核心是:改变视图的同时不会向后端发出请求。

为了达到这一目的,浏览器提供了 hash 和 history 两种模式。

hash :hash 虽然出现在 URL 中,但不会被包含在 http 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面。

history :history 利用了 html5 history interface 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器记录栈, 在当前已有的 back、forward、go 基础之上,它们提供了对历史记录修改的功能。只是当它们执行修改时,虽然改变了当前的 URL ,但浏览器不会立即向后端发送请求。 因此可以说, hash 模式和 history 模式都属于浏览器自身的属性,vue-router 只是利用了这两个特性(通过调用浏览器提供的接口)来实现路由。

实现的原理:

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

history :hashchange 只能改变 # 后面的代码片段,history api (pushState、replaceState、go、back、forward) 则给了前端完全的自由,通过在window对象上监听popState()事件。pushState()、replaceState() 方法接收三个参数:stateObj、title、url。

// 设置状态
history.pushState({color: "red"}, "red", "red");

// 监听状态
window.onpopstate = function(event){
    console.log(event.state);
    if(event.state && event.state.color === "red"){
        document.body.style.color = "red";
    }
};

// 改变状态
history.back();
history.forward();

应用场景:

通过 pushState 把页面的状态保存在 state 对象中,当页面的 url 再变回到这个 url 时,可以通过 event.state 取到这个 state 对象, 从而可以对页面状态进行还原,如页面滚动条的位置、阅读进度、组件的开关等。

调用 history.pushState() 比使用 hash 存在的优势:

pushState 设置的 url 可以是同源下的任意 url ;而 hash 只能修改 # 后面的部分,因此只能设置当前 url 同文档的 url pushState 设置的新的 url 可以与当前 url 一样,这样也会把记录添加到栈中;hash 设置的新值不能与原来的一样,一样的值不会触发动作将记录添加到栈中 pushState 通过 stateObject 参数可以将任何数据类型添加到记录中;hash 只能添加短字符串 pushState 可以设置额外的 title 属性供后续使用



相关文章:
⤧  上一篇 maven构建openfire插件 ⤧  下一篇 Axure9 激活码