序文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 ページのキャッシュ時間を非表示にする方法
この記事では、カラフルな太陽のハロー効果を実現するためのJavaScriptキャンバスの具体的なコー...
1. ダウンロード: http://www.oracle.com/technetwork/java/...
データの初期化 `test_01` が存在する場合はテーブルを削除します。 テーブル「test_01...
1. CSS、jQuery、Canvasを使用してアニメーションを作成する1. キャンバス利点: ...
目次概要1. 親コンポーネントが子コンポーネントに値を渡す2. 子コンポーネントが親コンポーネントに...
ユーザーとグループの管理1. ユーザーとグループの基本概念ユーザーとグループ:システム上のすべてのプ...
Mac で Docker を使用して Oracle をデプロイする方法まずdockerをインストール...
1. catalina.bat は UTF-8 に設定する必要があります。UTF-8 に設定しないと...
目次el-scrollbar スクロールバーel-uploadはクリックをシミュレートしますel-s...
誰もがこんな気持ちになったことがあると思います。30 秒の広告が入った動画を見ると、とても不快に感じ...
1. トランザクションとは何ですか?データベース トランザクション (略称: トランザクション) は...
みなさんこんにちは。私は梁旭です。 Linux を使用するときに、計算を行う必要がある場合があり、そ...
序文Nginx 構成のサーバー ブロック内の場所は、リクエスト URI を一致させるために使用され、...
目次問題の説明原理分析問題分析拡大する総括する問題の説明ユーザーはプライマリ データベースに対して変...
metaはhtml言語のhead領域にある補助タグです。おそらく、これらのコードは不要だと思うかもし...