序文Vue.js シングルページ アプリケーション (SPA) がかなり複雑になると、Vue ルーターとネストされたルートが必要になります。ネストされたルートにより、相互にネストされたより複雑なユーザー インターフェイスとコンポーネントが可能になります。 Vue Router のネストされたルートの有用性を示すために、比較的単純なユースケースを作成しましょう。 Vue CLI での設定まだインストールされていない場合は、次のコマンドを実行して Vue CLI をグローバルにインストールします。 $ npm インストール -g @vue/cli または $ 糸グローバル追加 @vue/cli これで、コマンドラインから vue コマンドを実行できるようになりました。 alligator-nest という Vue アプリを作成しましょう。 $ vue ワニの巣を作成します プロンプトでデフォルトのプリセットを選択します(Enter キーを押します)。その後、次のコマンドを実行します。 $ npm インストール vue-router 次に、任意のエディターで alligator-nest ディレクトリを開きます。 基本コード次の CSS は、UI の要素を配置するのに役立ちます。これを public/ フォルダーにスタイルシート ファイルとして追加し、public/index.html で参照します。これを実現するには、CSS グリッドを使用します。 グリッド .行1 { グリッド行開始: 1; グリッド行の終了: 2; } .行12 { グリッド行開始: 1; グリッド行の終了: 3; } .row123 { グリッド行開始: 1; グリッド行の終了: 4; } .行2 { グリッド行開始: 2; グリッド行の終了: 3; } .行23 { グリッド行開始: 2; グリッド行の終了: 4; } .行3 { グリッド行開始: 3; グリッド行の終了: 4; } .col1 { グリッド列開始: 1; グリッド列の終了: 2; } .col12 { グリッド列開始: 1; グリッド列の終了: 3; } .col123 { グリッド列開始: 1; グリッド列の終了: 4; } .col1234 { グリッド列開始: 1; グリッド列の終了: 5; } .col2 { グリッド列開始: 2; グリッド列の終了: 3; } .col23 { グリッド列開始: 2; グリッド列の終了: 4; } .col234 { グリッド列開始: 2; グリッド列の終了: 5; } .col3 { グリッド列開始: 3; グリッド列の終了: 4; } .col34 { グリッド列開始: 3; グリッド列の終了: 5; } .col4 { グリッド列開始: 4; グリッド列の終了: 5; } 次に、vue-cli によって追加されたデフォルト ファイルにいくつか変更を加えてみましょう。 src/components フォルダから HelloWorld.vue を削除し、src/App.vue からそれに関連するすべてのものを削除します。 App.vue の HTML マークアップと CSS スタイルに次の変更を加えます。 <テンプレート> <div id="アプリ"> <h1 class="row1 col12">ワニの巣</h1> <a class="row1 col3">旅行</a> <a class="row1 col4">概要</a> <div class="row2 col234"></div> </div> </テンプレート> html、本文{ 高さ:100vh; 幅:100vw; パディング: 0; マージン: 0; } #アプリ { フォントファミリー: Avenir、Helvetica、Arial、sans-serif; -webkit-font-smoothing: アンチエイリアス; -moz-osx-font-smoothing: グレースケール; 色: #2c3e50; パディング: 2%; 高さ: 100%; 表示: グリッド; グリッドテンプレート行: 20% 80%; グリッドテンプレート列: 25% 25% 25% 25%; } プロジェクトのルートで npm run serve を実行すると、ブラウザで localhost:8080 にマウスを移動してスケルトン レイアウトを確認できます。これらの display:grid プロパティは便利です!これでルートの作成を開始できます。 Vueルーターの登場/components フォルダーに AboutPage.vue というコンポーネントを作成します。次のようになります: <テンプレート> <div> <h2>について</h2> <p>ワニは恐竜の時代にも存在していました。</p> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ 名前: 'AboutPage', } </スクリプト> <スタイルスコープ> </スタイル> これで、main.js ファイルには /about ルートが必要になります。こんな感じです。 'vue-router' から VueRouter をインポートします。 'vue' から Vue をインポートします。 './App.vue' からアプリをインポートします。 Vue.config で productionTip を false に設定します。 'vue-router' から VueRouter をインポートします。 Vue.use(VueRouter); './components/AboutPage.vue' から AboutPage をインポートします。 定数ルート = [ { パス: '/about'、コンポーネント: AboutPage }, ] const ルーター = 新しい VueRouter({ ルート }) 新しいVue({ レンダリング: h => h(App), ルーター }).$mount('#app'); 最後に、App.vue に戻り、「About」アンカー タグを、属性 to="/about" を持つ <router-link> タグに変更します。次に、2 番目の div を <router-view> タグに変更します。グリッド配置クラスのプロパティは変更しないでください。 これで、「About」ページのルーティングが処理された、完全に機能するサイト スケルトンが完成しました。 ここではルーティングに重点を置いているため、スタイル設定にはあまり時間をかけません。しかし、Travels ページをもう少し洗練されたものにしたいと思っています。 まず、AboutPage を作成したのと同じ方法で TravelPage を作成します。 main.js で参照します。 また、最終的に TravelPage.vue にネストされる次の 2 つのコンポーネントを作成する必要があります。 旅行アメリカページ.vue <テンプレート> <div> <p>ワニはアメリカのルイジアナ州とフロリダ州に生息しています。</p> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ 名前: 'TravelAmericaPage' } </スクリプト> <スタイルスコープ> </スタイル> 旅行中国ページ.vue <テンプレート> <div> <p>ワニは中国の揚子江流域に生息しています。</p> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ 名前: 'TravelChinaPage' } </スクリプト> <スタイルスコープ> </スタイル> ネストされたルートの設定ここで、main.js と TravelPage.vue の両方を更新して、子を使用してこれらのネストされたルートを参照するようにします。 main.js を更新して、ルート定数の次の定義を追加する必要があります。 定数ルート = [ { パス: '/travel'、コンポーネント: TravelPage、 子供たち: [ { パス: '/travel/america'、コンポーネント: TravelAmericaPage }, { パス: '/travel/china'、コンポーネント: TravelChinaPage} ] }, { パス: '/about'、コンポーネント: AboutPage } ]; 子のネストは無期限に継続できることに注意してください。 TravelPage.vue は次のように記述できます。 旅行ページ.vue <テンプレート> <div id="旅行"> <h2 class="row1">旅行</h2> <div class="flex-container row2"> <router-link to="/travel/america">アメリカ</router-link> <router-link to="/travel/china">中国</router-link> </div> <ルータービュークラス="row3"></ルータービュー> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ 名前: 'TravelPage' } </スクリプト> <スタイルスコープ> div { テキスト配置: 中央; } #旅行 { 表示: グリッド; グリッドテンプレート行: 20% 40% 40%; } .flex-コンテナ{ ディスプレイ: フレックス; コンテンツの両端揃え: スペースを空ける; } </スタイル> localhost:8080 を確認すると、Travels ページに 2 つのサブページがあることがわかります。いずれかのリンクをクリックすると、それに応じて URL が更新されます。 要約するこのチュートリアルがネストされたルートの使用方法を理解するのに役立つことを願っています。 このトピックに関する追加の注意事項 - path:'/location/:id' などの動的セグメントを使用してルートを定義できます。次に、それらのルートのビューで、その ID を this.$route.params として参照できます。この機能は、Web サイトやアプリで特定の種類のデータ (ユーザー、画像など) をさらに表示したい場合に便利です。 これで、vue.js ルーターのネストされたルーティングに関するこの記事は終了です。vue.js のネストされたルーティングに関する関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Nginx でバージョン番号と Web ページのキャッシュ時間を非表示にする方法
この記事では、MySql のインデックス、ロック、トランザクションに関する知識のポイントをまとめてい...
質問まず、私が遭遇した問題についてお話しします。まず、そういった需要があるわけです。フロントエンドは...
システムメンテナンス中は、いつでも CPU 使用率を確認し、対応する情報に基づいてシステムの状態を分...
1. HTML送信ボタンと下部ボタンの基本構文構造1. HTML送信ボタン入力タグで type=&...
1. CSS の概念: (カスケーディング スタイル シート)利点: 1. コンテンツとプレゼンテ...
たとえば、昨日新規登録されたユーザーを照会するには、次の 2 つの書き方があります。 説明する ch...
初心者の Linux ユーザーとして、私は単純なgcc/g++操作を何度も使用してきましたが、少し複...
1. はじめにまず、1 台のマシンで複数のインスタンスを使用する理由という質問に答える必要があります...
目次序文始める基本レイアウトデータバインディングイベントバインディング最適化ジッター問題を最適化する...
1.Tomcatの最適化構成(1)Tomcatのcatalina.batを変更するJavaをサーバー...
mysqladmin ツールの使用形式は次のとおりです。 mysqladmin [オプション] コ...
序文データベースの応用において、プログラマーは継続的な実践を通じて多くの経験を積んできました。これら...
Windows サーバー リモート デスクトップのデフォルトのポート番号は 3389 です。職場でサ...
前回の記事では、Zabbix のパッシブ、アクティブ、Web 監視に関するトピックについて学習しまし...
目次序文1. 需要と効果必要効果2. コードの実装index.vue(html)日付方法テスト結果3...