効果:まず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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: CentOS に Nginx をインストールする方法
>>: 標準SQL更新ステートメントの3つの用途についての簡単な理解
コンピュータを使用すると、システム内に大量のゴミが生成されます。最も一般的なケースは、同じファイルが...
現在、Docker には中国向けの公式ミラーがあります。詳細については、https://www.do...
目次1. Commonjsのエクスポートとrequireの使用1.1 CommonJS エクスポート...
この記事では、VMware Workstation Pro で Win10 オペレーティング システ...
01. コマンドの概要seq コマンドは整数のシーケンスを生成するために使用されます。 02. コマ...
目次イベントとは簡単な例イベントをバインドする方法フレームワーク内のイベントイベントオブジェクトイベ...
この記事を書いている時点でのReactのバージョンは16.13.1です1 npm run eject...
序文Linux カーネルでは、netfilter は、パケット フィルタリング、ネットワーク アドレ...
1. スプレッド演算子スプレッド演算子は 3 つのドット ... で、複数の引数 (関数呼び出しなど...
1. 新しいUIプロジェクトを作成するまず、私たちの UI は ColorUI に基づいています。C...
序文以前、画像とテキストの垂直方向のずれの問題について説明しました。ここで示した小さな例では、小さな...
目次1. シーン紹介2 コードの最適化2.1 ファンを増やす問題を解決する2.2 作品追加の問題を解...
面接には必需品、仕事でも必ず使います。うーん、誰でも分かるでしょう。これ以上何も言わずに、要約とレン...
テーブル user があり、フィールドは id、nick_name、password、email、p...
ポートを使用して MySQL をインストールした後、しばらくすると /var の容量が不足しているこ...