Vue が 4 レベルのナビゲーションと検証コードを実装する方法の例

<テンプレート>
  <div id="ホームラッパー">
    <h1>{{ 名前 }}</h1>
    <ナビ>
      <!-- セカンダリ ルータの出口はプライマリ ルータのインターフェイスにあります -->
      <router-link to="/one">1</router-link>
      <router-link :to="{ name: 'Two' }">2</router-link>
      <router-link :to="threeObj">3</router-link>
      <!-- プログラムによるナビゲーション/ルーティング -->
      <button @click="fourBtn">4</button>
    </nav>
     <ルータービュー></ルータービュー>
  </div>
</テンプレート>
 
<スクリプト>
エクスポートデフォルト{
  データ（） {
    戻る {
      名前: "ホーム",
      3つのオブジェクト: {
        名前:「3」、
      },
    };
  },
  メソッド: {
    4つのボタン（）{
      var ユーザーID = 6789;
      this.$router.push({
        パス: `four/${userId}`,
      });
    },
  },
};
</スクリプト>
 
<style lang="less" スコープ>
#ホームラッパー{
  ナビ{
    ディスプレイ: フレックス;
    {
      フレックス: 1;
      背景色: アンティークホワイト;
      高さ: 50px;
      行の高さ: 50px;
    }
  }
}
</スタイル>

<テンプレート>
    <div>
        <h1>{{名前}}</h1>
        <ul>
            <li>
                <router-link to="/levl31">ウェブ</router-link>
            </li>
            <li>
                <router-link :to="{name:'name32'}">バックエンド</router-link>
            </li>
            <li>
                <!-- マルチレベルルーティングでは名前付きルートを使用する方が便利です -->
                <router-link :to="{name:'name33'}">AI</router-link>
            </li>
            <li>
                <router-link to="/one/levl34">UI</router-link>
            </li>
            <li>
                <router-link :to="{name:'name35'}">レベル 3 ルーター 4</router-link>
            </li>
        </ul>
        <!-- 第 3 レベルのルータは第 2 レベルのルータのインターフェイスを終了します -->
        <ルータービュー></ルータービュー>
 
    </div>
</テンプレート>
 
<スクリプト>
    エクスポートデフォルト{
        名前:'One',
        データ（） {
            戻る {
                名前:「最初のページ」
            }
        },
        
    }
</スクリプト>
 
<style lang="less" スコープ>
ul{
    リストスタイル: なし;
    ディスプレイ: フレックス;
    幅: 100%;
    左マージン: -40px;
 
}
li{
    フレックス: 1;
    背景色: オレンジ;
    高さ: 50px;
    行の高さ: 50px;
 
}
 
</スタイル>

<テンプレート>
  <div>
    <h1>{{ 名前 }}</h1>
    <button @click="changeCode">確認コード</button>
    <img :src="imgCodeUrl" alt="">
  </div>
</テンプレート>
 
<スクリプト>
エクスポートデフォルト{
  // コンポーネントのエイリアスは、Vue デバッグ中に表示するのに便利です。name: "Two_zh",
  データ（） {
    戻る {
      名前: "ページ 2",
      画像コード URL:""
    };
  },
  メソッド: {
    // 検証コードを取得する changeCode() {
        // /api は vue.config.js 内のプロキシ設定です。const url = "api/v1/captchas";
    // 定数 url = "https://elm.cangdu.org/v1/captchas";
      この.axios
        .post(url, {})
        .then((res) => {
            this.imgCodeUrl =res.data.code 
          console.log("検証コードインターフェース:",res);
        })
        .catch((e) => {
          console.log("エラー:", e);
        });
    },
  },
};
</スクリプト>
 
<style lang="less" スコープ>
</スタイル>

<テンプレート>
    <div>
        <h1>{{名前}}</h1>
 
    </div>
</テンプレート>
 
<スクリプト>
    エクスポートデフォルト{
        名前:'3',
        データ（） {
            戻る {
                名前:「ページ3」
            }
        },
        
    }
</スクリプト>
 
<style lang="less" スコープ>
 
</スタイル>

<テンプレート>
    <div>
        <h1>{{名前}}</h1>
 
    </div>
</テンプレート>
 
<スクリプト>
    エクスポートデフォルト{
        名前:'4',
        データ（） {
            戻る {
                名前: "ページ 4"
            }
        },
        作成された() {
            console.log("ページ 4 が作成されました:",this.$route)
        },
    }
</スクリプト>
 
<style lang="less" スコープ>
 
</スタイル>

'vue' から Vue をインポートします
'vue-router' から VueRouter をインポートします。
'@/views/day/home.vue' から Home2 をインポートします。
 
Vue.use(VueRouter)
 
定数ルート = [
  {
    パス： "/"、
    名前: 'home2',
    コンポーネント: Home2、
    リダイレクト: "/one",
    子供たち： [
      {
        パス: "/one",
        名前: 'One'、
        コンポーネント: () => import("@/views/day/one.vue"),
        子供たち： [
          {
            パス: '/levl31',
            // h creacteElement は仮想 Dom/ラベル Vnode を作成することを意味します 
            // 最初のパラメータはタグ名の拡張子です。記述するコンポーネントもタグ名である場合 // 2 番目のパラメータはタグのオプションの属性構成です // 3 番目のパラメータはタグ コンポーネントの内容です: {
              レンダリング(h) {
                h("h1", "フロントエンド") を返します
              }
            },
          },
          {
            // /Default はルートディレクトリを表します#/levl31
            // スラッシュがなければ自動的に連結されます#/one/levl32
            //名前付きルーティングパスを使用する: "levl32"
            名前: "name32",
            成分： {
              レンダリング(h) {
                h("h1", "バックエンド") を返します
                }
              },
            },
            {
              パス:"/one?level33",
              名前:"name33",
              成分：{
                レンダリング(h) {
                  h("h1", "人工知能") を返す
                  }
              }
            },
            {
              パス:"/one/levl34",
              名前:"name34",
              成分：{
                レンダリング(h) {
                  return h("h1","ただのアーティスト")
                  }
              }
            },
            //レベル3および4ルーティング{
              パス:"レベル35",
              名前:"name35",
              コンポーネント:()=>import("@/views/Home.vue"),
              //第4レベルのルーティングの子:[
                {
                  パス:"男の子",
                  名前:"男の子",
                  コンポーネント:()=>import("@/views/boy.vue")
                },
                {
                  パス:"女の子",
                  名前:"女の子",
                  コンポーネント:()=>import("@/views/girl.vue")
                }
 
              ]
 
            }
        ]
      },
      {
        パス: "/two",
        名前: '2'、
        コンポーネント: () => import("@/views/day/two.vue")
      },
      {
        パス: "/three",
        名前: 'Three'、
        コンポーネント: () => import("@/views/day/three.vue")
      },
      {
        // オプションパラメータ \d 数値文字列はパスと一致しません: "four/:id(\\d*)?",
        名前: 'Four'、
        コンポーネント: () => import("@/views/day/four.vue")
      },
    ]
  }
]
 
const ルーター = 新しい VueRouter({
  ルート
})
 
デフォルトルーターをエクスポートする