Vue 中query和params的区别

前言

我们在阅读这篇文章，先来了解下router和route。

router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。

route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等。

一、传参和接收参数

1、query

传参: 
this.$router.push({
        path:'/xxx',
        query:{
          id:id
        }
      })
  
接收参数:
this.$route.query.id

传参是this.$router,接收参数是this.$route。

2、params

传参: 
this.$router.push({
        name:'xxx',
        params:{
          id:id
        }
      })
  
接收参数:
this.$route.params.id

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

二、路由设置

使用params方法传参的时候，要在路由后面加参数名，而query方法，就没有这种限制。

router.js:

{
    path: '/index/:id', // 接收参数的路由，使用params传参要加参数名，这里的id就是参数名
    name: 'index',
    component: () => import('./view/index'),
}

使用params方法，如果路由上面不写参数，也是可以传过去的，但不会在url上面显示出你的参数，并且当你跳到别的页面或者刷新页面的时候 参数会丢失。

三、总结

使用query传参的话，会在浏览器的url栏看到传的参数类似于get请求，使用params传参的话则不会，类似于post请求