vue3页面跳转传参取参

在Vue3中，页面跳转传参和取参可以使用params和query两种方式。其中，params是隐式路由传参，使用name和params属性进行跳转和接收参数；而query是显式路由传参，使用path和query属性进行跳转和接收参数。具体实现可以使用$router.push()或者RouterLink组件进行跳转，使用useRoute()钩子函数获取路由信息，使用route.params或route.query获取传递的参数。下面是一个示例代码：

// 页面跳转传参
// 隐式路由传参
<template>
<button @click="goToItem">跳转到商品详情页</button>
</template>

<script>
import { useRouter } from 'vue-router'

export default {
setup() {
const router = useRouter()

const goToItem = () => {
router.push({ name: 'item', params: { id: 1 } })
}

return {
goToItem
}
}
}
</script>

// 显式路由传参
<template>
<button @click="goToItem">跳转到商品详情页</button>
</template>

<script>
import { useRouter } from 'vue-router'

export default {
setup() {
const router = useRouter()

const goToItem = () => {
router.push({ path: '/item', query: { id: 1 } })
}

return {
goToItem
}
}
}
</script>

// 页面取参
<template>
<div>{{ itemId }}</div>
</template>

<script>
import { useRoute } from 'vue-router'

export default {
setup() {
const route = useRoute()

const itemId = route.params.id || route.query.id

return {
itemId
}
}
}
</script>

--相关问题--:
1. Vue3中如何进行路由拦截和权限控制？
2. Vue3中如何进行路由懒加载？
3. Vue3中如何进行路由动画