一、路由跳转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路由实现跳转传参的详细内容。