浅谈Vue中$Router中query与params传参与接收参数，以及$Router与$Route的区别

原创于 2019-10-17 10:42:11 发布 · 507 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#$Router #$Route #query #params

Vue 专栏收录该内容

25 篇文章

订阅专栏

本文详细解析了Vue Router中query与params两种参数传递方式的区别与使用场景。query传参类似于GET请求，可在URL中直接看到参数；而params传参则类似POST请求，参数隐藏在路由配置中。此外，还阐述了$router与$Route的区别，前者为VueRouter实例，包含路由跳转方法等，后者则是当前路由信息对象。

一，$Router中query与params传参与接收参数

1，query传参与接参：

传参：
this.$router.push({path: '/community/set', query: {'code': this.appCode}})
接参：
this.appCode = this.$route.query.code

2，params传参与接参：

传参：
this.$router.push({name: '/community/set', params: {'code': this.appCode}})
接参：
this.appCode = this.$route.params.code

结论：①，query传参，由path (path: '/community/set') 引入路由；params传参，则由name (name: '/community/set') 引入路由。附加：(query传参相当于get请求可以在地址栏看到参数，params传参相当于post请求）

二，$Router与$Route的区别

1，$router为VueRouter实例，包括了路由的跳转方法，钩子函数等；

2，$route为当前路由信息对象，里面可以获取name、path、query、params等

完