vue3页面传参

一，用query传参

方法： router.push({path: ‘路由地址’, query: ‘参数’})

例子：a页面携带参数跳转到b页面并且b页面拿到a页面传递过来的参数

在路由router.ts配置

a页面：

<template><div >a页面</div><button @click="btnHandle">跳转到b页面</button>
</template><script setup lang='ts'>import { useRouter } from 'vue-router';const router = useRouter();const btnHandle = () => {router.push({path: '/b', query: {name: 'coderkey', age: 18}})}
</script>

b页面：

<template><div >b页面</div>
</template><script setup lang='ts'>import { useRoute } from 'vue-router';const route = useRoute();console.log('route',route.query); //{name: 'coderkey', age: 18}
</script>

---

一，用params传参

方法： router.push({name: ‘路由名’, params: ‘参数’})

在路由router.ts配置

a页面：

<template><div >a页面</div><button @click="btnHandle">跳转到b页面</button>
</template><script setup lang='ts'>import { useRouter } from 'vue-router';const router = useRouter();const btnHandle = () => {router.push({name: 'b', params: {name: 'coderkey', age: 18}})}
</script>

b页面：

<template><div >b页面</div>
</template><script setup lang='ts'>import { useRoute } from 'vue-router';const route = useRoute();console.log('route',route.params); //{name: 'coderkey', age: 18}
</script>

---