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

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

前言

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

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

vue3中新增API:useRouter和useRoute

一、路由跳转

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

javascript 复制代码
import { useRouter } from 'vue-router'

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

javascript 复制代码
//先在setup中定义
 const router = useRouter()

3.用router.push跳转页面

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

二、页面传参需要注意

1.如果提供了 path,params 会被忽略,但query 没有这种情况,此时需要提供路由的 name 或手写完整的带有参数的 path

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

相关推荐
你的人类朋友28 分钟前
🫏光速入门cURL
前端·后端·程序员
01传说1 小时前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js
小李飞飞砖1 小时前
React Native 组件间通信方式详解
javascript·react native·react.js
小李飞飞砖1 小时前
React Native 状态管理方案全面对比
javascript·react native·react.js
烛阴2 小时前
Python装饰器解除:如何让被装饰的函数重获自由?
前端·python
千鼎数字孪生-可视化2 小时前
Web技术栈重塑HMI开发:HTML5+WebGL的轻量化实践路径
前端·html5·webgl
凌辰揽月2 小时前
7月10号总结 (1)
前端·css·css3
天天扭码3 小时前
很全面的前端面试——CSS篇(上)
前端·css·面试
EndingCoder3 小时前
搜索算法在前端的实践
前端·算法·性能优化·状态模式·搜索算法
sunbyte3 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue