2023vue3中如何使用router路由实现跳转传参

 所属分类:web前端开发

 浏览:120次-  评论: 0次-  更新时间:2023-05-18
描述:更多教程资料进入php教程获得。 一、路由跳转1.首先在需要跳转的页面引入API—useRouterimport { useRouter } from 'vue-router&#...
更多教程资料进入php教程获得。

一、路由跳转

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 来响应这个变化 (比如抓取用户信息)

以上就是vue3中如何使用router路由实现跳转传参的详细内容,更多请关注zzsucai.com其它相关文章!

 标签: Vue3,router,
积分说明:注册即送10金币,每日签到可获得更多金币,成为VIP会员可免金币下载! 充值积分充值会员更多说明»

讨论这个素材(0)回答他人问题或分享使用心得奖励金币

〒_〒 居然一个评论都没有……

表情  文明上网,理性发言!