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

vue3.0取消了2.0部分api，所以路由跳转传值方式有所不同。


这里主要讲编程式导航，也就是router.push(location, onComplete?, onAbort?)


vue3.0新增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 }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效

router.push({ path: '/user', params: { userId }}) // -> /user




2.上述规则同样适用于 router-link 组件的 to 属性
3.如果目的地和当前路由相同，只有参数发生了改变 (比如从一个用户资料到另一个 /users/1 -> /users/2)，你需要使用 beforeRouteUpdate 来响应这个变化 (比如抓取用户信息)


续：
如果上述写法出现 prams 传参失效和报错问题，原因如下：
vue-router 在4.1.4版本有一个更新：删除了没有定义在path里的params。
                        
原文链接：https://blog.csdn.net/animatecat/article/details/117257037