大家好,今天和大家分享一下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 来响应这个变化 (比如抓取用户信息)文章来源:https://www.toymoban.com/news/detail-408610.html
总结
以上就是本章的全部内容,希望本章能够帮助到您。文章来源地址https://www.toymoban.com/news/detail-408610.html
到了这里,关于vue3中使用router路由实现跳转传参的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!