地址跳转路由传参的两种方式 页面之间的传值方式

1.在地址显示内容的传参方式:this.$route.query

首先跳转的地方写入要跳转的路由以及要传的参数

this.$router.push({
            path: '路由地址',
            query: {
              data1: '参数string',
              data2: {
                data21: '',
                data22: {}
              }
            }
          });

在跳转之后的页面接收参数

this.data1 = this.$route.query.data1;
this.data2 = this.$route.query.data2.data21;
this.data3 = this.$route.query.data2.data22;

2.不会在地址显示内容的传参方式:this.$route.params

首先跳转的地方写入要跳转的路由以及要传的参数

this.$router.push({
        name: '路由名称', 
        params:{data: '888'}

        });

在跳转之后的页面接收参数

this.data=this.$route.params.data;

以上两种传参方式除了地址是否显示其他区别不大,注意搭配组合方式,数据传输对象无区别都是对象

<think>好的,用户想了解在Vue3的setup语法糖中如何实现路由传参。我需要结合提供的引用内容来整理答案。首先,根据引用[1]和[4],setup语法糖中可以使用useRoute和useRouter来处理路由路由传参通常有query和params两种方式。引用[2]提到Vue3的编程式导航使用router.push方法,这和Vue2的$router.push类似。在子组件中,引用[4]展示了如何用defineProps接收props,但路由参数应该通过route对象获取,而不是props。需要分步骤说明如何递参数和获取参数,包括query和params的区别,以及router.push的用法。同时,要给出代码示例,确保语法正确,比如在模板中正确使用路由,以及在setup中如何导入和使用路由相关函数。另外,要注意用户提到的语法糖特性,比如script setup的简洁写法,避免不必要的代码结构。最后,生成相关问题,可能涉及性能优化、其他传参方式或组件通信方法。</think>### Vue3 setup语法糖实现路由传参的方法 #### 1. 路由跳转传参 在`<script setup>`中使用`useRouter`进行路由跳转,支持两种传参方式: ```javascript import { useRouter } from 'vue-router' const router = useRouter() // query传参(参数显示在URL) router.push({ path: '/target', query: { id: 123, type: 'news' } }) // params传参(需提前配置路由路径) router.push({ name: 'Detail', // 路由名称 params: { id: 456 } }) ``` **注意**:params传参要求路由配置包含动态参数,如`path: '/detail/:id'`[^2][^3] #### 2. 接收路由参数 在目标组件中使用`useRoute`获取参数: ```javascript import { useRoute } from 'vue-router' const route = useRoute() // 获取query参数 console.log(route.query.id) // 输出123 // 获取params参数 console.log(route.params.id) // 输出456 ``` 两种传参方式的区别: - **query**:参数明文显示在URL,刷新不丢失 - **params**:路径更简洁,但刷新后参数会丢失[^1][^4] #### 3. 组件通信扩展 对于父子组件,推荐组合使用: ```javascript // 子组件 const props = defineProps(['msg']) const emit = defineEmits(['update']) // 父组件 <Child :msg="message" @update="handleUpdate"/> ``` 这种组合式API比路由传参更适合组件层级明确的数据递[^4]
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值