这篇文章重要给人人引见了关于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；
能够存在浏览器兼容性题目，请从此处查阅：https://caniuse.com/#feat=his…。
Demo Or Source

由于是公司项目，所以现在没有Demo或源码

总结

以上就是这篇文章的全部内容了，愿望本文的内容对人人的进修或许事情具有肯定的参考进修代价