uni-app ルーティング構成の使用法とページ ジャンプ パラメーターの転送

uni-app ルーティング構成の使用法とページ ジャンプ パラメーターの転送

uni-app ルーティング構成の使用法とページ ジャンプ パラメーターの転送

---

---

序文

UNI-APP 学習シリーズのルーティング設定の使用法とページ ジャンプ パラメータの転送

---

1. コンポーネントルートジャンプパラメータ転送

• コンポーネントルーティングジャンプ

  • 例：

          <navigator
            class="title"
            url="/pages/about/index"
            open-type="navigate"
            hover-class="navigator-hover"
            >{
            
            {
            
             title }}</navigator>
    
    

  • ルーティングパラメータ:

      <navigator
            class="title"
            url="/pages/about/index?title=reboertTeacher"
            open-type="navigate"
            hover-class="navigator-hover"
            >{
            
            {
            
             title }}</navigator>
    

  • パラメータを受信します。

    import {
            
             onLoad } from "@dcloudio/uni-app";
    import {
            
             ref } from "vue";
    const title = ref("");
    onLoad((options) => {
            
            
      console.log(options?.title);
      title.value = options?.title;
    });
    

    実行効果は以下の図に示されています
    
    

2. 機能ルーティングジャンプパラメータの受け渡し

• 機能的ルーティングジャンプ

  • 例：

    uni.navigateTo({
            
            
      url: '/pages/index/index'
    })
    

  • ルーティングパラメータ:

    # 传递参数
    
    uni.redirectTo({
            
            
        url: "/pages/index/index?aboutTitle=" + aboutTitle.value,
      });
    

  • パラメータを受信します。

    # 接受参数
    onLoad((option) => {
            
            
      aboutTitle.value = option?.aboutTitle;
    });
    

    実行効果は以下の図に示されています
    
    

• パラメータの受け渡しの問題

• URL 値には長さ制限があり、文字列が長すぎると配信が失敗します。

• 解決

  • uniapp経由のグローバルカスタムイベント
    • https://uniapp.dcloud.net.cn/tutorial/page.html#emit
  • グローバル状態管理ライブラリによって処理されます
    • 豆
    • vuex

---

要約する

本日は以上がお話したい内容です この記事ではUNI-APP学習シリーズのuni-appルーティング設定とページジャンプパラメータ転送の内容を全て紹介します 今後もUNI-APPフレームワークをベースに開発・解説していきます気に入ったら「フォロー」をクリックしてください。UNI-APP フレームワークの使用に関するチュートリアルは引き続き更新されます。