vue3路由跳转传递参数
时间: 2023-08-20 13:05:00 浏览: 301
vue-router实现组件间的跳转(参数传递)
在Vue 3中,你可以使用`router.push`方法来进行路由跳转,并且可以通过第二个参数传递参数。
首先,确保你已经安装并配置了Vue Router。
然后,在你的组件中,你可以这样使用`router.push`方法来进行路由跳转并传递参数:
```javascript
// 导入Vue Router
import { createRouter, createWebHistory } from 'vue-router'
// 创建路由实例
const router = createRouter({
history: createWebHistory(),
routes: [
// 路由配置
]
})
// 在组件中使用
router.push({ path: '/your-route', query: { key: value }})
```
在上面的例子中,`path`是你要跳转到的路由路径,`query`是一个对象,你可以在其中传递键值对作为参数。例如,`{ key: value }`。
在目标组件中,你可以通过`this.$route.query`来获取传递的参数。
```javascript
// 在目标组件中获取参数
this.$route.query.key // 获取参数值
```
通过上述方法,你就可以在Vue 3中进行路由跳转并传递参数了。希望对你有所帮助!
阅读全文