vue路由或者前端路由的实现原理

实现前端路由的技术

1、利用H5中的history API 实现

主要利用history.pushStatae和history.replaceState来实现,不同之处在于,pushState会增加一条新的历史记录,而replaceState则会替换当前的历史记录,并且再用该方法发布项目时,还需配置一下Apache。

2、用URL的hash实现

我们在URL中常看到#,这个符号,而“#”这个符号有两种情况,一个是我们所谓的锚点,但是路由里的锚点不叫锚点,我们称之为hash,它主要利用监听hash 值的变化来触发事件 ——hashchange事件来做页面局部的更新。

总结:

两者相比较而言,hash方案兼容性好,而H5的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 属性供后续使用
劣势:

history 在刷新页面时,如果服务器中没有相应的响应或资源,就会出现404。因此,如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面
hash 模式下,仅 # 之前的内容包含在 http 请求中,对后端来说,即使没有对路由做到全面覆盖,也不会报 404

相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页