首页IT科技vue 路由传递参数(vue3中使用router路由实现跳转传参)

vue 路由传递参数(vue3中使用router路由实现跳转传参)

时间2025-08-03 22:07:39分类IT科技浏览4381
导读:大家好,今天和大家分享一下vue3中如何进行跳转并进行传参。...

大家好              ,今天和大家分享一下vue3中如何进行跳转并进行传参              。

前言

vue3取消了vue2部分api                      ,所以路由跳转和传值的方式会有所不同                      。

我们今天主要讲router.push(location, onComplete?, onAbort?)

vue3中新增API:useRouter和useRoute

一              、路由跳转

1.首先在需要跳转的页面引入API—useRouter

import { useRouter } from vue-router

2.在跳转页面定义router变量

//先在setup中定义 const router = useRouter()

3.用router.push跳转页面

// 字符串 router.push(home) // 对象 router.push({ path: home }) // 命名的路由 router.push({ name: user, params: { userId: 123 }}) // 带查询参数       ,变成 /register?userId=123 router.push({ path: register, query: { userId: 123 }})

4.如果有参数的话       ,在接收页面引入API–useRoute

import { useRoute } from vue-router

5.在接收页面定义变量route                      ,获取传过来的变量

//首先在setup中定义 const route = useRoute() //query let userId=route.query.userId; //params let userId=route.params.userId;

二                      、页面传参需要注意

1.如果提供了 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 }})

2.上述规则同样适用于 router-link 组件的 to 属性

3.如果目的地和当前路由相同               ,只有参数发生了改变 (比如从一个用户资料到另一个 /users/1 -> /users/2),你需要使用 beforeRouteUpdate 来响应这个变化 (比如抓取用户信息)

总结

以上就是本章的全部内容                     ,希望本章能够帮助到您       。

声明:本站所有文章                      ,如无特殊说明或标注,均为本站原创发布       。任何个人或组织              ,在未征得本站同意时                      ,禁止复制       、盗用       、采集                      、发布本站内容到任何网站               、书籍等各类媒体平台                      。如若本站内容侵犯了原著者的合法权益       ,可联系我们进行处理               。

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
会议繁琐(觉得会议过程太麻烦?) 栾川在线官网(栾川贴吧最新帖子)