Vue params传参刷新网页数据丢失的解决方法

发送数据页面Q:
this.$router.push({name:'A',params:{val:JSON.stringify(val)}})
接收数据页面A:
val:JSON.parse(this.$route.params.val)
这时刷新页面A，val就会报错undefined

//发送数据页面Q:
this.$router.push({name:'A',query:{val:JSON.stringify(val)}})
//接收数据页面A:
val:JSON.parse(this.$route.query.val)
//页面A地址:xxx/A?val=xxxxxxxxxxxxxx
//这时刷新页面A，数据正常存在,但是页面地址会变得很长，而且传递的数据也会暴露在外面。

发送数据页面Q:
this.$router.push({name:'A',params:{val:JSON.stringify(val)}})
接收数据页面A:
val:this.$route.params.val==undefined?undefined:(JSON.parse(this.$route.params.val) || JSON.parse(sessionStorage.getItem('musicList')))
//params.val是否等于undefined?若为true则val赋值为undefined,若为false则利用短路运算符，若存在this.$route.params.val 则赋值给 val,若不存在则从sessionStorage里找数据赋值给val
//虽然浏览器刷新不会触发destory,但是会每次触发created。
created(){
//若条件为false则表示没存储过该数据。是第一次进入该页面。那么就把数据存入本地。
if(Boolean(sessionStorage.getItem('musicList')) == false) {
// 数据储存在本地存储里
sessionStorage.setItem('musicList', JSON.stringify(this.Id))
}
//若val==undefined则表示，该页面刷新过了。params数据没了。那么就从本地找出数据再赋值给val
if(this.val==undefined){
this.val= JSON.parse(sessionStorage.getItem('musicList'))
}
}
//当正常的从这个页面跳转到其他页面的时候会触发该函数，切到其他页面的时候就把该数据从本地存储删掉即可
beforeDestory(){
    sessionStorage.removeItem('musicList')
}

const routes = [
 {
   path: '/user/:id',
   component: User,
   props: true
 }
]
// User.vue
<script setup>
defineProps({ id: String })
</script>
<template>
 <div>User {{ id }}</div>
</template>

const routes = [
 {
   path: '/promotion',
   component: Promotion,
   props: { newsletterPopup: false }
 }
]

const routes = [
 {
   path: '/search',
   component: SearchUser,
   props: route => ({ query: route.query.q })
 }
]

//例如访问 /search?q=vue 会传入 { query: 'vue' }。

const routes = [
 {
   path: '/user/:id',
   components: { default: User, sidebar: Sidebar },
   props: { default: true, sidebar: false }
 }
]

{
    name:'Detail',
    path:'detail/:id',
    component:Detail,
 
    // 第一种写法：props值为对象
    // 该对象中所有的key-value的组合最终都会通过props传给Detail组件
    // 这种方法有一些局限性，那就是传递的都是死数据。所以这种放使用的非常少。
    // props:{a:900}
 
    //第二种写法：props值为布尔值，布尔值为true
    //则把路由收到的所有params参数通过props传给Detail组件
    // 这个方法的局限性也很明显，那就是只能接收到所有的params参数。你要是用query参数传过来的，那就使用不了
    // props:true
    
    //第三种写法：props值为函数，
    // 该函数返回的对象中每一组key-value都会通过props传给Detail组件
    
    //props值为函数
    //  这个函数有一个特点：它可以从形参列表中拿到$route对象，有了$route对象,那我们基本上就可以上天下地无所不能。
    
    props(route){
        return {
            id:route.query.id,
            title:route.query.title
        }
    }
    // 使用解构赋值的连续写法
    /*
    props({query:{id,title}}){
        return {id,title}
    }
    */
}