Linux 拨号vps windows公众号手机端

uniapp路由传参的方式有哪些

lewis 7年前 (2017-12-29) 阅读数 15 #程序编程
文章标签 uniapp

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

版权声明

本文仅代表作者观点,不代表米安网络立场。

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

热门