Vue用History记录上一页面的数据办法的代码介绍

[摘要]这篇文章主要给大家介绍了关于Vue用History记录上一页面的数据方法的代码介绍，文中通过示例代码介绍的非常详细，需要的朋友们可以参考一下。前言本文主要介绍的是Vue利用History记录上一页面...

这篇文章主要给大家介绍了关于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），因为需要灰度上线，万一有问题，要调整的页面也只有一个。代码如下：

`<script>`
`export` `default` `{`
`props: {`
`openroute: {`
`type: Boolean,`
`default``: () => (``true``)`
`}
`},`
`}`
`</script>`

`<script>` `export` `default` `{` `methods: {` `fetchData(page) {` `/请求参数` `let params =` `this``.params;` `//请求页码` `let newPage;` `//openroute处理` `if` `(``this``.openroute) {` `//为url添上#page` `if` `(page) {` `history.replaceState(params.data, document.title,` `"#"` `+ page);` `}` `else` `{` `if` `(history.state) {` `if` `(!history.state.key && location.hash && location.hash.split(``"#"``) && location.hash.split(``"#"``)[1]) {` `if` `(JSON.stringify(history.state) !== JSON.stringify(params.data)) {` `//选择条件变更则请求第一页` `history.replaceState(params.data, document.title,` `"#1"``);` `}` `else` `{` `history.replaceState(params.data, document.title,` `"#"` `+ location.hash.split(``"#"``)[1]);` `}` `}` `else` `{` `history.replaceState(params.data, document.title,` `"#1"``);` `}` `}` `else` `{` `if` `(location.hash && location.hash.split(``"#"``) && location.hash.split(``"#"``)[1]) {` `history.replaceState(params.data, document.title,` `"#"` `+ location.hash.split(``"#"``)[1]);` `}` `else` `{` `history.replaceState(params.data, document.title,` `"#1"``);` `}` `}` `}` `//获取url后面的#page` `if` `(location.hash && location.hash.split(``"#"``) && location.hash.split(``"#"``)[1]) {` `newPage = Number(location.hash.split(``"#"``)[1]);` `}` `else` `{` `newPage = 1;` `}` `}` `else` `{` `newPage = page;` `}` `//请求数据，获得结果，传递给列表页面` `}` `}` `}` `</script>`

列表页面获取选择条件

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

`<script>`
`export` `default` `{`
`data()
 {`eturn`
`{`
`form: {`
`aaa: (history.state && history.state.aaa) ? history.state.aaa :` `null``,`
`bbb: (history.state && history.state.bbb) ? history.state.bbb :` `null``,`
`ccc: (history.state && history.state.ccc) ? history.state.ccc :` `null`
`},`
`};`
`}`
`};`
`</script>`已解决，初始变量不需要动，可以通过以下方式实现：
`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
分析（这篇文章有源码分析（ <font color='red'>求解答：WebStorm中如何关联源码？</font>），很棒）：
FAQ
需要使用history.replaceState方式是因为：它不会将更改后的url压到history栈中，所以不会增加回退和前进的操作步数；
使用history.replaceState方式，可存储的state大小不能操作640k
以上就是Vue用History记录上一页面的数据方法的代码介绍的详细内容，更多请关注php中文网其它相关文章！				
				
					微信
					分享
				

网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



  关键词：Vue用History记录上一页面的数据办法的代码介绍