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

使用本地存储+组件卸载（不会在地址栏中显示）

这里有一段代码，我想让它刷新网页数据不会丢失的同时，还不希望数据显示在url地址里。

复制代码

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

1、当使用 query传参时，由于数据是拼接在url地址后面的，所以刷新网页不会导致数据丢失。

复制代码

//发送数据页面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，数据正常存在,但是页面地址会变得很长，而且传递的数据也会暴露在外面。

上面的做法虽然满足了刷新网页数据不丢失，但是没满足第二个条件，数据出现在url地址里了。所以不太好。

2、使用params传参，数据不会出现在url地址里。

最开始的代码就是使用的params传参，这样虽然可以让数据不出现在url地址里，但是刷新网页会导致数据丢失。所以也不太好。

那怎么样才能实现呢？

使用浏览器直接刷新网页是不会触发vue生命周期里beforeDestory 和destoryed 这两个函数的。因为浏览器直接刷新页面就相当于再次访问一遍这个网址可以理解为是浏览器的主动行为。但会触发created、mounted。
localStorage和sessionStorage 的区别

存储在localStorage里的数据如果不是主动去清除的话，就算浏览器关闭了，下次打开浏览器他还是会存在。是一个长期的存在。

存储在sessionStorage 里的数据只要关闭浏览器就会自动清除。但是刷新网页不会清除。是一个临时的存在。

基于以上两个知识点，可以利用vue里浏览器刷新不会触发beforeDestory生命周期函数和数据储存本地这两个方法来补全params刷新丢失数据的短板。

复制代码

发送数据页面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')
}

上面没用到localStorage是因为如果用户跳转到页面A后，直接关闭浏览器，再打开浏览器输入网址，就能从本地存储找到该数据，但是sessionStorage关闭浏览器，数据就消失了。不会出现localStorage的问题。

路由的 props 属性--路由解耦（会在地址栏中显示出来）

在 Vue Router 中，通过 props 向路由组件传递参数，可以减少组件与 $route 的耦合性，使组件更易复用和测试。Vue Router 提供了多种方式来实现这一功能。

布尔模式

这种方式适合直接将 URL 参数映射到组件 props。

在路由配置中将 props 设置为 true ，这样 route.params 会直接作为组件的 props 传入。
在组件中声明对应的 props 接收参数。

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

对象模式

适用于静态数据传递。

在路由配置中将 props 设置为一个对象。
对象中的键值会直接作为静态 props 传入组件。

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

函数模式

将 props 设置为一个函数，接收当前路由对象 route。
返回一个对象作为 props，可对参数进行转换或组合。

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

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

命名视图

当路由有多个命名视图时，需要为每个视图单独配置 props：

复制代码

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

访问对应路径，检查组件是否正确接收到 props。建议保持 props 函数无状态，以确保可复用性。

补充Props配置：让路由组件更方便的收到参数

复制代码

{
    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}
    }
    */
}