Vue 路由传参 query 和 params 的区别

query使用 path 和 name 传参跳转都可以，而 params 只能使用 name 传参跳转。

• query传参：

var router = new VueRouter({
   routes: [
     { path: '/login', component: login },
     { name:'register',path: '/register', component: register } 
   ]
})


// 注意：这是 query 两种传参方式 一种是直接跳转把字符串传过去 一种是传描述目标位置的对象
<router-link to="/login?id=10&name=zs">登录</router-link>
<router-link :to="{path:'/register',query:{id:5,name:'lili'}}">注册</router-link>
或
<router-link :to="{name:'register',query:{id:5,name:'lili'}}">注册</router-link>  
  
等同于：
this.$router.push('/login?id=10&name=zs')
this.$router.push({path:'/register',query:{id:5,name:'lili'}})
或
this.$router.push({name:'register',query:{id:5,name:'lili'}})

接收参数：this.content = this.$route.query;
123456789101112131415161718192021
注意接收参数的时候，已经是$route而不是$router了哦！！

• params传参：

var router = new VueRouter({
  routes: [
    { path: '/login/:id/:name', component: login },// 这里不传入对应的参数（:/id/:name） 刷新页面 参数会消失,页面中就丢失了数据
    { name:'register', path: '/register', component: register }
  ]
})

// 注意：这是 params 两种传参方式 一种是直接跳转把字符串传过去 一种是传描述目标位置的对象
<router-link to="/login/12/ls">登录</router-link>
<router-link :to="{name:'register',params:{id:10,name:'lili'}}">注册</router-link>

等同于：
this.$router.push('/login/12/ls')
this.$router.push({name:'register',params:{id:10,name:'lili'}})


接收参数：this.content = this.$route.params;
1234567891011121314151617

传参跳转页面时，query 不需要再路由上配参数就能在新的页面获取到参数，params 也可以不用配，但是 params 不在路由配参数的话，当用户刷新当前页面的时候，参数就会消失。

也就是说使用params不在路由配参数跳转，只有第一次进入页面参数有效，刷新页面参数就会消失。

---

效果的展示

query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示

• query:
  
  
• params:
  
  
  注意：这里的12和ls 对应的是/:id/:name 这两个参数可以不写 那么就不会在地址栏上显示 不过刷新页面参数会消失 写上参数刷新页面 参数不会消失

参考地址