vue router使用query和params传参的使用和区别

一、params、query是什么？

• params：/router1/:id ，/router1/123，/router1/789 ,这里的id叫做params
• query：/router1?id=123 ,/router1?id=456 ,这里的id叫做query。

1、用法上的
query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name。

注意接收参数的时候，已经是 $route 而不是$router了哦！！

2、展示上的
区别：

• query更加类似于我们ajax中get传参，params则类似于post

二、写法如下

//params方式
methods:{
      clickme:function(){
        this.$router.push({this.$router.push({ name: 'user', params: { id: 'user', name: 'user', age: 'John' }
,query: { id: 's', name: 'ss', age: 'John' }})
      }
    }

注意：路由设置这里，当你使用params方法传参的时候，要在路由后面加参数名，并且传参的时候，参数名要跟路由后面设置的参数名对应。使用query方法，就没有这种限制，直接在跳转里面用就可以。(例如：params的name与id必须与路由匹配，否则无效果)。并且当你跳到别的页面后刷新页面的时候params参数会丢失，那依赖这个参数的http请求或者其他操作就会失败。

//query方式
methods:{
      clickme:function(){
        this.$router.push({ path: '/user/1', query: { id: 'user', name: 'John', age: 'John' }})
      }
    }

三、实例如下

//home.vue
<template>
   <div>
       <h3>{{home}}</h3>
       <span @click="clickme">user页面</span>
       <router-view/>
   </div>
</template>
<script>
export default{
   data(){
       return{
           home:'Home页面'
       }
   },
   methods:{
     clickme:function(){
       this.$router.push({ path: '/user/1', query: { id: 'user', name: 'John', age: 'John' }})
     }
   }
}
</script>

//router/index.js
const routers= new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: Home,
      children: [
        { path: 'index', name:'index', component: Index },
      ]
    },
    {
      path: '/about',
      component: About
    },{
      name:'user',
      path: '/user/:id',
      component: User
    }
  ]
});