溫馨提示×

uniapp路由傳參的方式有哪些

小億
867
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
亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女