vue3.0 router路由跳转传参（router.push）

import { useRouter } from 'vue-router'

const router = useRouter()


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

import { useRoute } from 'vue-router'

const route = useRoute()

//query
let userId=route.query.userId;
 
//params
let userId=route.params.userId;

页面传参需要注意的问题

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


const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123

// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user