在vue3中使用router传参
时间: 2023-11-06 08:59:01 浏览: 36
在Vue3中,使用Router传递参数有两种方式:通过路由路径传递参数和通过query传递参数。
1. 通过路由路径传递参数
定义路由路径时,在路径中使用动态参数,例如:
```javascript
const routes = [
{
path: '/user/:id',
name: 'user',
component: User
}
]
```
在组件中,可以通过$router对象的params属性访问路由参数,例如:
```javascript
export default {
name: 'User',
mounted() {
console.log(this.$route.params.id)
}
}
```
2. 通过query传递参数
在路由路径中不使用动态参数,而是使用query参数,例如:
```javascript
const routes = [
{
path: '/user',
name: 'user',
component: User
}
]
```
在组件中,可以通过$router对象的query属性访问路由参数,例如:
```javascript
export default {
name: 'User',
mounted() {
console.log(this.$route.query.id)
}
}
```
在使用$router.push()方法时,通过第二个参数传递query参数,例如:
```javascript
this.$router.push({ name: 'user', query: { id: 123 }})
```