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中的值。
这样就可以保证,离到详情页,或者时重新打开另外的详情,或者是刷新页面都不会有问题。