uniapp路由传参的方式有哪些

avatar
作者
筋斗云
阅读量:6

在uniapp中,路由传参的方式有以下几种:

  1. query传参:通过在url中添加查询参数,例如/pages/home/home?param1=value1&param2=value2,在目标页面可以通过this.$route.query获取参数。

  2. params传参:通过在url中添加路径参数,例如/pages/home/home/param1/param2,在目标页面可以通过this.$route.params获取参数。

  3. props传参:在路由配置中使用props: true,然后在目标页面通过props接收参数。例如:

    // 路由配置 {   path: '/pages/home/home',   name: 'home',   component: Home,   props: true } 
    <!-- 目标页面 --> <template>   <div>{{ param1 }}</div> </template>  <script> export default {   props: {     param1: String   } } </script> 
  4. eventBus传参:使用事件总线,在源页面触发事件并传递参数,在目标页面接收事件并获取参数。例如:

    // 在源页面中 this.$eventBus.$emit('eventName', param); 
    // 在目标页面中 this.$eventBus.$on('eventName', (param) => {   // 处理参数 }); 
  5. Vuex传参:使用全局状态管理,在源页面通过Vuex存储参数,在目标页面通过Vuex获取参数。

以上是uniapp中常用的路由传参方式,可以根据具体的场景选择合适的方式。

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!