Vue3路由跳转传值

使用前需要先引入

import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()

1. 动态路径传值

路由对象配置动态路径

{path: '/xx/:city', component: xxx, ... }

在跳转此path时第n段直接携带参数

router.push('/xxx/' + 参数)

在跳转的目标组件中接收参数

route.params.city

2. query传参, 刷新保留参数!经典

调用push传递数据

router.push({ path: '路径', query: 参数对象 })

在对应组件中接收

route.query

3. params传参, 2022/8/22 新版本中永久删除

router.push({ name: '路由name', params: 参数对象 })