vue路由传参query和params
时间: 2023-09-12 15:10:42 浏览: 101
vue router使用query和params传参的使用和区别
5星 · 资源好评率100%
Vue 路由传参可以使用 query 和 params 两种方式。
1. 使用 query 传参:
query 方式传参是将参数拼接在 URL 后面,以键值对的形式传递,例如:
```js
this.$router.push({ path: '/user', query: { id: '123' }})
```
在接收参数的页面,可以通过 `$route.query` 获取参数:
```js
console.log(this.$route.query.id) // 123
```
2. 使用 params 传参:
params 方式传参是将参数作为路由的一部分,例如:
```js
this.$router.push({ path: '/user/123' })
```
在声明路由时,需要使用 `:id` 表示参数:
```js
{
path: '/user/:id',
component: User
}
```
在接收参数的页面,可以通过 `$route.params` 获取参数:
```js
console.log(this.$route.params.id) // 123
```
需要注意的是,params 方式传参需要在路由声明时定义参数的名称和类型,而 query 方式传参则不需要。
阅读全文