vue3路由跳转和接收参数

在Vue3中，路由跳转和接收参数的方式有所不同。新增了两个API：useRoute和useRouter。其中，useRoute可以获取当前路由的信息，useRouter可以获取路由实例，从而进行路由跳转。在路由跳转时，可以使用对象形式或命名路由的形式进行跳转，并且可以通过params或query的方式传递参数。具体的代码实现可以参考以下示例：

1. 跳转路由：

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

// 单纯的跳转路由
router.push('msg')

// 对象形式
router.push({ path: 'msg' })

// 命名路由，我的命名路由是Msg；passValue是自定义的名称，input.value是input要输入的内容
router.push({ name: 'Msg', params: { passValue: input.value } })

// query的话路由就变成了msg?passValue=在input输入的值
router.push({ name: 'Msg', query: { passValue: input.value } })

2. 接收参数：

import { useRoute } from 'vue-router'

const route = useRoute()

// 获取params参数
const passValue = route.params.passValue

// 获取query参数
const passValue = route.query.passValue