vue3路由跳转和接收参数
时间: 2023-11-16 08:57:31 浏览: 110
在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
```
阅读全文
相关推荐
















