<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>

<script>
 export default {
 data() {
 return {
 form: {
 aaa: (history.state && history.state.aaa) "htmlcode">

created(){
 //获取缓存的数据
 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>），很棒）：
www.jb51.net/article/150037.htm...
FAQ



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

Demo Or Source


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


Manipulating the browser history
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对的支持。