这篇文章主要介绍了vue3中如何使用router路由实现跳转传参的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue3中如何使用router路由实现跳转传参文章都会有所收获,下面我们一起来看看吧。一、路由跳转首
这篇文章主要介绍了vue3中如何使用router路由实现跳转传参的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue3中如何使用router路由实现跳转传参文章都会有所收获,下面我们一起来看看吧。
首先在需要跳转的页面引入api—useRouter
import { useRouter } from 'vue-router'
在跳转页面定义router变量
//先在setup中定义 const router = useRouter()
用router.push跳转页面
// 字符串router.push('home')// 对象router.push({ path: 'home' })// 命名的路由router.push({ name: 'user', params: { userId: '123' }})// 带查询参数,变成 /reGISter?userId=123router.push({ path: 'register', query: { userId: '123' }})
如果有参数的话,在接收页面引入API–useRoute
import { useRoute } from 'vue-router'
在接收页面定义变量route,获取传过来的变量
//首先在setup中定义const route = useRoute()//querylet userId=route.query.userId;//paramslet userId=route.params.userId;
如果提供了 path,params 会被忽略,但query 没有这种情况,此时需要提供路由的 name 或手写完整的带有参数的 path
const userId = '123'router.push({ name: 'user', params: { userId }})router.push({ path: `/user/${userId}` })// 这里的 params 不生效router.push({ path: '/user', params: { userId }})
上述规则同样适用于 router-link 组件的 to 属性
3.如果目的地和当前路由相同,只有参数发生了改变 (比如从一个用户资料到另一个 /users/1 -> /users/2),你需要使用 beforeRouteUpdate 来响应这个变化 (比如抓取用户信息)
关于“vue3中如何使用router路由实现跳转传参”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“vue3中如何使用router路由实现跳转传参”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网精选频道。
--结束END--
本文标题: vue3中如何使用router路由实现跳转传参
本文链接: https://www.lsjlt.com/news/354615.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0