Vue使用params方式传参数据丢失

前言

在vue的组件之间传递数据时，因为不想url上面有?xx=yy的内容出现，所以选择params形式传递参数，正常跳转，好看又方便
问题出现了：突然在刷新跳转之后的页面的时候，页面的数据加载不出来了，仔细一看，原来是路由中携带的参数不见了!! 组件刷新还能导致路由的参数丢失。

一、 Vue-router传递参数的方式说明

1. query传递参数

   query传递参数不会出现路参数丢失的情况，所以不需要做其他的配置，不过缺点就是参数会拼接在url后面: url?xx=yy 这种方式来传递参数，会暴露参数，并且url也有字符上限限制

   使用方式：

   this.$router.push({path: 'path', query: {id:1}})

   获取参数：

   this.$route.query.id获取key为id的路由参数

   
   

2. params传递参数

   params传递参数是将参数放在route对象中，没有放在url后面，但是会有一个问题，在跳转之后的页面中刷新的时候，会导致当前路由中保存的params的参数丢失

   使用方式：

   this.$router.push({name: 'name', params:{id:1}})

   获取参数:
   <