广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

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=123router.push({ path: 'register', query: { userId: '123' }})

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

import { useRoute } from 'vue-router'

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

//首先在setup中定义const route = useRoute()//querylet userId=route.query.userId;//paramslet 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 来响应这个变化 (比如抓取用户信息)

以上就是vue3中如何使用router路由实现跳转传参的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~