温馨提示×

uniapp路由传参的方式有哪些

小亿
239
2023-10-22 05:21:20
栏目: 编程语言

在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中常用的路由传参方式,可以根据具体的场景选择合适的方式。

0