解决vue3中通过params传值以后，刷新页面，params丢失问题。

1、通过query传值，这个刷新应该是不会丢失的，但是如果值超长，比较麻烦。而且也是显示在地址栏中的。

2、通过params来传值，这个是看不到的，但是刷新页面会丢失。

解决(lang="ts")：

A页面传B页面

A：

push({

 name: 'routerName',

 params: { account: encodeURIComponent(JSON.stringify(record)) },

});

B：

...
const params = ref<对象类型>();
onMounted(() => {
    const tempData = localStorage.getItem('tempData');
    if (tempData) {
      params.value = JSON.parse(tempData);
    } else {
      let { account } = useRoute().params; //isUpdate 传false的时候，解构后也是string类型
      params.value = JSON.parse(decodeURIComponent(account));
      localStorage.setItem('tempData', decodeURIComponent(account));
    }
    if (params.value) {
      .....
    }
);

onBeforeUnmount(() => {

　　localStorage.removeItem('tempData');

});

这样就可以完美解决刷新丢失params数据的问题。

官方生命周期钩子：

https://v3.cn.vuejs.org/api/options-lifecycle-hooks.html#beforeunmount

 

真正在项目中跑的时候，这个是有问题的，因为只要不关闭详情页，然后切换到别的页面，就会删除，再切换到详情页，就会报错。

正确的思路：

1、查看

useRoute().params有没有account，有就取，并且保存到localStorage中

2、如果没有，则取localStorage中的值。

这样就可以保证，离到详情页，或者时重新打开另外的详情，或者是刷新页面都不会有问题。