vue-router传参query VS params

vue-router传参的坑（query和params）。

1.query方式传参和接收参数

//传参: 
this.$router.push({
        path:'/xxx'
        query:{
          id:id
        }
      })
//链接传参：
<router-link :to="{ path: requestUrl, query: {id: scope.row.parentOId} }" tag="span">
       添加下级树结构
</router-link>


//接收参数:
this.$route.query.id

等同url传参新页面刷新依然能接收到

注意:传参是this.$router,接收参数是this.$route,这里千万要看清了！！！

2.params方式传参和接收参数

传参: 
this.$router.push({
        name:'xxx'
        params:{
          id:id
        }
      })

接收参数:
this.$route.params.id

//router/index.js 路由配置 
 path: '/xx/xx/role:ide', name: 'role',

路由本身传参，页面刷新参数全无(配置后刷新正常获取 例： role:ide)

注意:params传参，push里面只能是 name:'xxxx',不能是path:'/xxx',因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！！！

另外，二者还有点区别，直白的来说query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示

params是路由的一部分,必须要有。query是拼接在url后面的参数，没有也没关系。

1.params一旦设置在路由，params就是路由的一部分，如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容。

比如：跳转/router1/:id

<router-link :to="{ name:'router1',params: { id: status}}" >正确</router-link>

<router-link :to="{ name:'router1',params: { id2: status}}">错误</router-link>

2.params、query不设置也可以传参，但是params不设置的时候，刷新页面或者返回参数会丢失，query并不会出现这种情况，这一点的在上面说过了

看一些博客的时候提到用vue 的<keep-alive>，即在<router-view>外套一层<keep-alive>实现页面缓存，但是这样确实是不是每一个页面都需要缓存的特别是一些状态之间切换需要流程化更改状态的页面，写上这个就不能实现数据的实时刷新了