当前位置：首页 > news >正文

vue3页面传参

news 2025/6/30 3:50:24

一，用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>

查看全文

http://www.lryc.cn/news/380819.html