详解从某视频剪辑软件路由器到html5的推送状态

最近在用某视频剪辑软件的时候突然想到一个问题

首先，我们知道某视频剪辑软件实现的单页应用中一般不会去刷新页面，因为刷新之后页面中的状态管理数据就不见了。

其次，我们也知道一般情况下，url变更的时候，比如指定位置、href、历史记录、推送、更换等，页面就会刷新。

那么问题来了，vue页面的页面跳转时怎么实现的？没刷新页面么？没刷新页面，又要改变url，加载新内容怎么做的？

去翻了一下某视频剪辑软件路由器的源码，找到这样一段

导出类HTML5History扩展了历史{.push(位置： rawl位置，onComplete？功能奥纳波特？函数){ const { Route当前： }=这个。过渡到(位置，路线={ pushState(干净的路径(这。基本路线。全路径))手柄滚动(这。router，route，fromRoute，false)onComplete on complete(route)}，on abort)} replace(位置： rawl位置，on complete？功能奥纳波特？函数){ const { Route当前3360 }=这个。过渡到(位置，路由={替换状态(干净路径(这。基本路线。全路径))手柄滚动(这。router，route，fromRoute，false)on complete on complete(route)}，onAbort) }.}再看看方法内部

导出函数pushState(网址？字符串，替换？布尔值){ saveskrollposition()//尝试.捕获推送状态调用以绕过safari///DOM异常18,其中它限制为100个推送状态调用常量历史=窗口.历史尝试{如果(替换){历史记录。替换状态({ key : _ key }，''，URL)} else { _ key=genKey()。历史。PushState({ key : _ key }，''，url) } }捕获{ window . location[替换？替换：“分配”](url) }}答案就是html5在历史中新增加的方法：pushState和替换状态。这两个又是干啥的呢？（两个十分类似，以下以推送状态为例说明，区别和推与替换一致)

HTML5的pushState()

首先看看这个是干什么的

推送状态方法就是向历史中推一条记录，更改页面url，但是不刷新页面，不刷新页面，不刷新页面。不刷新页面，这点很关键，这和下面的操作很相似

窗户。位置。href=窗口。位置。href “# a=b”知道干嘛的了，再看看应用程序接口怎么用的

history.pushState(状态、标题、网址)；状态是一个对象，具体内容除了最大640KB之外没有别的限制，比如在某视频剪辑软件中是生成了一个键存进去了。若无特殊需要传个空即可。这个状态可以在历史或者popstate的事件中看到

历史中的

popstate中的

标题这个参数目前没什么用处，可能是给以后预留的参数，暂时用空就好了

全球资源定位器(统一资源定位符)很明显，就是替换后的全球资源定位器(统一资源定位符)了网址。可以接受绝对地址和相对地址，设置绝对地址的时候，要保证域名和当前域名一致，否则汇报如下错误

未捕获的domeexception :未能在《历史》:上执行“推送状态”无法在来源为“https://macard-aliyun 1。选择方式。com :8443 "和统一资源定位器为“https://macard-aliyun 1。选择方式。com 3360843/view/H5/indexas dasd "的文档中创建统一资源定位器为“https://macard-aliyun 1。com/"的历史状态对象历史课。PushState(https://aixuedaiimg。OSS-中鸿。阿里云克斯。com/static/m/js/alog/v 1。0 .0/alog。量滴js)在匿名：1336023259

HTML5的popstate()

popstate与推送状态相对应，主要在页面全球资源定位器(统一资源定位符)变更的时候触发，一般绑定在窗户对象下

窗户。addeventlistener(' pop state '，e={ console.log('popstate '，)})前面推送状态中传入的状态对象，可以在这边接收到，并根据需要去做一些处理。

说到这某视频剪辑软件路由器是怎么实现页面"刷新"但不刷新的就知道了吧。

Vue-router使用属性pushState在页面前进时动态更改历史内容，添加记录，然后更改位置。同时，根据路由器去往的路由，获取对应的js资源文件并挂载到目标dom上更新页面内容，但页面本身不刷新。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。