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