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地址里，但是刷新网页会导致数据丢失。所以也不太好。

那怎么样才能实现呢？

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

2：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.js：

export default new Router({
  routes: [
    {
      path: "/",
      redirect: "/main",
    },
    {
      path: "/main",
      name: "Main",
      component: () => import("@/views/Main.vue"),
      children: [
        {
          //path: '/testPage', //这种方式不配置参数名，页面刷新会丢失参数
          path: "/testPage/:aaa/:bbb", //这样通过name 和 params进行路由传参时，刷新页面就不会丢失参数aaa和bbb 了。
          name: "TestPage",
          component: () => import("@/views/TestPage/TestPage.vue"),
        },
      ],
    },
  ],
});

调整函数：

methods: {
  //路由调整传参测试
  goRouterTest(){
    // this.$router.push('/testpage');
    this.$router.push({ name: 'TestPage', params: { aaa: '111', bbb: '222' } });
  }
}

这样传参时，地址栏就会出现参数了，这样属性就不会丢失了。

然后，可以选择配合路由解耦来使用

修改路由配置为：

{
  // path: '/testPage',  //这种方式不配置参数名，页面刷新会丢失参数
  path: '/testPage/:aaa/:bbb',  //这样通过name和params进行路由传参时，刷新页面就不会丢失参数aaa和bbb了
  name: 'TestPage',
  props: true,   //若个要解耦的 到组件中 props 中。
  component:() => import('@/views/TestPage/TestPage.vue')
}

要调整的组件生命 props：

<template>
  <div class="TestPage">
    Name路由传参{{ $route.params }}
  </div>
</template>
<script>
export default {
  name: "TestPage",
  props: {
    //将路由中的参数aaa和bbb解耦到组件上的props上
    aaa: {
      type: String,
    },
    bbb: {
      type: String,
    },
  },
  mounted() {
    console.log(
      "这是路由传的参数aaa",
      this.aaa,
      "这是路由传的参数bbb",
      this.bbb
    );
  },
};
</script>
<style scoped>
</style>

最后的效果（刷新页面参数不会丢失）：

当然也可以通过 path(或name) 和 query 的方式进行传参  this.$router.push({path: 路由路径，query: { 要传的参数 } })，但是这就不能进行props解耦了。

实现vue配置可选路由参数

假如下面是我们的某个路由：

{
  path: 'examPaperMultiPurpose/:action/:id', //多加 ? 代表这个参数是可选的。
  name: 'examPaperMultiPurpose',
  title: '考卷管理',
  notKeepAlive: true,
  props: true,
  component: () => import ('@/views/exam/examManage/examPaperMultiPurpose.vue'),
}

当我们这样进行页面跳转时：

this.$router.push( { name: 'examPaperMultiPurpose', params: {action: 'add'} } );

很显然我们在跳转时， 没有进行 id 参数 的 传递。我们在控制台也会看到这样的警告。

提醒我们缺少参数，id是一个没有定义的。

当我们有时候不是都想传递每个参数，我们可以把参数配置成可选的。配置方法为：在不想传递的参数后只要多加一个 ? 即可，如下代码：

//新增、编辑、查询考卷
{
  path: 'examPaperMultiPurpose/:action?/:id?', //多加 ? 代表这个参数是可选的。
  name: 'examPaperMultiPurpose',
  title: '考卷管理',
  notKeepAlive: true,
  props: true,
  component: () => import ('@/views/exam/examManage/examPaperMultiPurpose.vue'),
}

这样，我们就把两个参数action 和 id 配置成可选的路由参数了，之后，当我们继续进行上面的方式进行传参时，就不会警告我们 缺少参数了。

补充知识路由的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}
	}
    */
}

【Vue路由】props配置、replace属性、编程式路由导航、缓存路由组件