Vue利用History记录上一页面的数据方法实例

Magicer 发布于2019-07-25 14:31 / 2975人阅读

摘要：使用开始支持，通过方式，将页码作为参数存储在中，将选择条件存储在中尚不清楚数据具体是存储在哪里通过方式获取页码通过方式获取存储的选择条件。具体实现技术选择开关为分页组件添加一个开关，因为需要灰度上线，万一有问题，要调整的页面也只有一个。

这篇文章主要给大家介绍了关于Vue利用History记录上一页面的数据的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

前言

本文主要介绍的是Vue利用History记录上一页面数据的相关内容，vue使用history后,能够使得url更加漂亮,也就是不再有‘#"的问题，下面话不多说了，来一起看看详细的介绍吧

需求

从列表页的第二页进入详情页，返回时列表页仍然显示在第二页；

从列表页的第二页进入详情页，返回时列表页的筛选条件仍然存在。

技术选择

使用vue-router组件，通过this.$router.push({path: path, query: query});方式，将页码和选择条件作为参数存储在url中，这种方式在上面的UI设计中是可行的，但是当列表页中包含tab组件时（分页组件是公用的），会因为push的因素（因为push会打开新页面）导致一些问题（PS：也可能是本人技术能力的原因），未实现。
使用History API（HTML5开始支持），通过history.replaceState方式，将页码作为参数存储在url中，将选择条件存储在history中（尚不清楚数据具体是存储在哪里）；通过location.hash方式获取页码；通过history.state方式获取存储的选择条件。
具体实现--技术选择2

开关

为分页组件添加一个开关（openroute），因为需要灰度上线，万一有问题，要调整的页面也只有一个。代码如下：

``

分页组件中存储页码和选择条件&获取页码

``

列表页面获取选择条件

目前可能是因为框架设计的问题，没法在请求数据之前通过Object.assign方式为替换初始变量，所以先这样处理（笨方法，各位大佬有解决办法麻烦指导下，谢谢）：

``

已解决，初始变量不需要动，可以通过以下方式实现：

`if` `(history.state) {`
`Object.assign(``this``.form, history.state)`
`if` `(``this``.form.key) {`
`delete` `this``.form.key`
`}`
`}`
`},`

这里记录下：之前以为created方法是在分页组件的watch监听之后执行的，后来发现被误导了（因为之前是通过Object.assign(true, this.form, history.state)方式实现数据赋值的，但是并没有成功）。下面做个小总结：

Object.assign(true, a, b);”和“Object.assign(a, b);”有什么区别？

结论：前者：改a不影响b；后者：改a影响b

分析（这篇文章有源码分析（求解答：WebStorm中如何关联源码？），很棒）：

FAQ

需要使用history.replaceState方式是因为：它不会将更改后的url压到history栈中，所以不会增加回退和前进的操作步数；
使用history.replaceState方式，可存储的state大小不能操作640k；
可能存在浏览器兼容性问题，请从此处查阅：https://caniuse.com/#feat=his...。
Demo Or Source

因为是公司项目，所以目前没有Demo或源码

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值

混合云服务器托管 history历史记录上一页面上一访问页面阿里云服务器上传用vue做好的页面

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/40198.html

Vue利用History记录上一页面的数据方法实例

摘要：使用开始支持，通过方式，将页码作为参数存储在中，将选择条件存储在中尚不清楚数据具体是存储在哪里通过方式获取页码通过方式获取存储的选择条件。具体实现技术选择开关为分页组件添加一个开关，因为需要灰度上线，万一有问题，要调整的页面也只有一个。这篇文章主要给大家介绍了关于Vue利用History记录上一页面的数据的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学...

gggggggbong 2019-06-25 12:28 评论0 收藏0
Vue利用History记录上一页面的数据方法实例

摘要：使用开始支持，通过方式，将页码作为参数存储在中，将选择条件存储在中尚不清楚数据具体是存储在哪里通过方式获取页码通过方式获取存储的选择条件。具体实现技术选择开关为分页组件添加一个开关，因为需要灰度上线，万一有问题，要调整的页面也只有一个。这篇文章主要给大家介绍了关于Vue利用History记录上一页面的数据的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学...

Michael_Ding 2019-08-26 13:23 评论0 收藏0
Vue利用History记录上一页面的数据方法实例

摘要：使用开始支持，通过方式，将页码作为参数存储在中，将选择条件存储在中尚不清楚数据具体是存储在哪里通过方式获取页码通过方式获取存储的选择条件。具体实现技术选择开关为分页组件添加一个开关，因为需要灰度上线，万一有问题，要调整的页面也只有一个。这篇文章主要给大家介绍了关于Vue利用History记录上一页面的数据的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学...

jhhfft 2019-08-01 13:47 评论0 收藏0
history和hash，vue-router

摘要：另外该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件不会被触发使用的时候，可以为事件指定回调函数或者回调函数的参数是一个事件对象，它的属性指向和方法为当前所提供的状态对象即这两个方法的第一个参数。 history window.history(可直接写成history)指向History对象，它表示当前窗口的浏览历史。History对象保存了当前窗口访问过的所有页...

godiscoder 2019-08-23 18:07 评论0 收藏0
vue：路由实现原理

摘要：方法与方法不同之处在于，它并不是将新路由添加到浏览器访问历史栈顶，而是替换掉当前的路由可以看出，它与的实现结构基本相似，不同点它不是直接对进行赋值，而是调用方法将路由进行替换。随着前端应用的业务功能起来越复杂，用户对于使用体验的要求越来越高，单面（SPA）成为前端应用的主流形式。大型单页应用最显著特点之一就是采用的前端路由系统，通过改变URL，在不重新请求页面的情况下，更新页面视图。...

mikasa 2019-08-22 17:08 评论0 收藏0