params和query的区别 $route和$router 的区别

params
query
params和query的区别
$route
$router
params
params的类型：

配置路由格式：/router/:id 传递的方式：<router-link :to="'/user/'+userId">用户</router-link>
配置路由格式：/router/:id 传递的方式：this.$router.push('/user/'+this.userId)
配置路由格式：/router 传递的方式：this.$router.push({name:'User',params: {userId: 666}})
params传递后形成的路径：/router/123,/router/zhangsan
params接受传递的参数：<p>我是{{$route.params.userId}}用户相关信息</p>,

computed: {undefined
userId(){undefined
return this.$route.params.userId
}
}

query
query的类型：

配置路由格式：/router 传递的方式：this.$router.push({path:'/profile', query: {name:'123', age: 10}})
query传递后形成的路径：/router?id=666&name=zhangsan
query接受传递的参数：<h2>姓名：{{$route.query.name}}</h2>

params和query的区别
query要使用path来引入，params要使用name来引入，接受参数类似，分别是this.$route.query.name和this.$route.params.name

params传参和query传参有什么区别： 

（1）、用法上的

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

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

（2）、展示上的

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

query:

params: 

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

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

比如：跳转/router1/:id

1

2

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

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

（4）、params、query不设置也可以传参，params不设置的时候，刷新页面或者返回参数会丢失，这一点的在上面说过了
————————————————
版权声明：本文为CSDN博主「潇潇雨歇~」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/lan128lan/article/details/81126470

$route
$route为当前router跳转对象，也就是当前活跃激活的路由对象，包含当前路由的name,path,query,params等属性

$router
r o u t e r 为 当 前 V u e R o u t e r 实 例 ， 想 要 导 航 到 不 同 U R L ， 则 使 用 ‘ router为当前VueRouter实例，想要导航到不同URL，则使用 `router为当前VueRouter实例，想要导航到不同URL，则使用‘router.push`方法