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

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

効果:

まず5つのVueインターフェースを作成する

1.home.vueページ

<テンプレート>
  <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;
    }
  }
}
</スタイル>

2.one.vueインターフェース

<テンプレート>
    <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;
 
}
 
</スタイル>

3.two.vueページと検証コードの実装

結果図:

<テンプレート>
  <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" スコープ>
</スタイル>

4. three.vue ページ

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

5.four.vue ページ

<テンプレート>
    <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({
  ルート
})
 
デフォルトルーターをエクスポートする

要約する

Vue の 4 レベル ナビゲーションと検証コードの実装に関するこの記事はこれで終わりです。Vue の 4 レベル ナビゲーションと検証コードの関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue はナビゲーション バー効果を実現します (選択状態の更新は消えません)
  • Vueでnavナビゲーションバーを実装する方法
  • Vue2.0はナビゲーションメニューの切り替え効果を実現します
  • Vueはナビゲーションバーメニューを実装します
  • 非常に実用的なvueナビゲーションフック
  • VUEはスクロール監視ナビゲーションバーを上部に維持する方法を実装しています
  • Vue検証コードの60秒カウントダウン機能の簡単な実装
  • vueは携帯電話経由でSMS認証コードを送信する登録機能を実装します
  • VUEは画像検証コード機能を実装
  • Vueはランダムな検証コードサンプルコードを生成します

<<:  CentOS に Nginx をインストールする方法

>>:  標準SQL更新ステートメントの3つの用途についての簡単な理解

推薦する

Linuxで同一ファイルを見つける方法

コンピュータを使用すると、システム内に大量のゴミが生成されます。最も一般的なケースは、同じファイルが...

docker イメージのプル速度が遅い問題の解決策

現在、Docker には中国向けの公式ミラーがあります。詳細については、https://www.do...

Jsモジュールパッケージのエクスポートの使用法と違いにはインポートが必要

目次1. Commonjsのエクスポートとrequireの使用1.1 CommonJS エクスポート...

VMware Workstation Pro は Win10 ピュア バージョンのオペレーティング システムをインストールします

この記事では、VMware Workstation Pro で Win10 オペレーティング システ...

Linux seqコマンドの使い方の詳しい説明

01. コマンドの概要seq コマンドは整数のシーケンスを生成するために使用されます。 02. コマ...

JSブラウザイベントモデルの詳細な説明

目次イベントとは簡単な例イベントをバインドする方法フレームワーク内のイベントイベントオブジェクトイベ...

React スキャフォールディングのパスエイリアスを設定する方法

この記事を書いている時点でのReactのバージョンは16.13.1です1 npm run eject...

Linuxはiptablesを使用して複数のIPからのサーバーへのアクセスを制限します

序文Linux カーネルでは、netfilter は、パケット フィルタリング、ネットワーク アドレ...

JS ES の新機能: 拡張演算子の紹介

1. スプレッド演算子スプレッド演算子は 3 つのドット ... で、複数の引数 (関数呼び出しなど...

Uniappの小規模プログラム開発経験

1. 新しいUIプロジェクトを作成するまず、私たちの UI は ColorUI に基づいています。C...

モバイルデバイス上のぼやけた小さなアイコンの問題を解決する方法

序文以前、画像とテキストの垂直方向のずれの問題について説明しました。ここで示した小さな例では、小さな...

JS でパブリッシュ サブスクライブ モデルを作成する

目次1. シーン紹介2 コードの最適化2.1 ファンを増やす問題を解決する2.2 作品追加の問題を解...

CSS で水平方向と垂直方向に中央揃えする 10 の方法を教えます (要約)

面接には必需品、仕事でも必ず使います。うーん、誰でも分かるでしょう。これ以上何も言わずに、要約とレン...

MySQLデータの重複チェックと重複排除の実装ステートメント

テーブル user があり、フィールドは id、nick_name、password、email、p...

mysql のファイル mysql-bin.000001 とは何ですか? 削除できますか?

ポートを使用して MySQL をインストールした後、しばらくすると /var の容量が不足しているこ...