vue3 router.push params 传参
时间: 2023-08-17 15:09:28 浏览: 243
vue.js this.$router.push获取不到params参数问题
5星 · 资源好评率100%
在Vue 3中,你可以使用`router.push`方法来进行路由跳转并传递参数。
假设你有一个名为`Home`的组件,并且你想要通过路由跳转到该组件,并传递一个名为`id`的参数,你可以按照以下步骤进行操作:
1. 首先,确保你已经安装了Vue Router,并且在项目中正确配置了路由。
2. 在需要跳转的地方,比如一个按钮的点击事件中,使用`router.push`方法进行路由跳转。例如:
```javascript
// 导入Vue Router实例
import { createRouter, createWebHistory } from 'vue-router'
// 创建Vue Router实例
const router = createRouter({
history: createWebHistory(),
routes: [
// ...你的其他路由配置
]
})
// 在某个事件触发时进行路由跳转并传递参数
router.push({ name: 'Home', params: { id: 123 } })
```
在这个例子中,我们通过`router.push`方法进行了路由跳转,并传递了一个名为`id`的参数,其值为`123`。你可以根据你的需要修改参数的名称和值。
3. 在接收参数的组件中,你可以通过`$route.params`来获取传递过来的参数。例如,在`Home`组件中:
```javascript
export default {
mounted() {
// 获取传递过来的id参数
const id = this.$route.params.id
console.log(id) // 输出:123
}
}
```
通过`this.$route.params`,你可以获取传递过来的参数,并在需要的地方进行使用。
这就是在Vue 3中使用`router.push`进行路由跳转并传递参数的方法。希望对你有所帮助!如果还有其他问题,请随时提问。
阅读全文