Vue.jsでネストしたルーティングを使う方法の紹介

Vue.js シングル ページ アプリケーション (SPA) は非常に複雑になるため、Vue ルーティング とネストされたルーティングが必要になり始めます。ネストされたルーティングにより、より複雑なユーザー インターフェイスとコンポーネントを相互にネストすることができます。 Vue Router でのネストされたルーティングの有用性を示すために、比較的単純なユースケースを作成してみましょう。

Vue CLI を使用したセットアップ

まだインストールされていない場合は、次のコマンドを実行して Vue CLI をグローバルにインストールします:

$ npm install -g @vue/cli

or

$ yarn global add @vue/cli

Nowコマンドからインストールできます。 次に、vue コマンドを実行します。 alligator-nest という Vue アプリを作成しましょう:

$ vue create alligator-nest

プロンプトでデフォルトのプリセットを選択します (Enter キーを押します)。その後、次のコマンドを実行します。

$ npm install vue-router

次に、任意のエディタで alligator-nest ディレクトリを開きます。

基本コード

次の CSS は、UI の要素を配置するのに役立ちます。これをスタイルシート ファイルとして public/ フォルダーに追加し、public/index.html で参照します。これを行うには、CSS グリッド を使用します。

grid.css

.row1 {
  grid-row-start: 1;
  grid-row-end: 2;
}

.row12 {
  grid-row-start: 1;
  grid-row-end: 3;
}

.row123 {
  grid-row-start: 1;
  grid-row-end: 4;
}

.row2 {
  grid-row-start: 2;
  grid-row-end: 3;
}

.row23 {
  grid-row-start: 2;
  grid-row-end: 4;
}

.row3 {
  grid-row-start: 3;
  grid-row-end: 4;
}

.col1 {
  grid-column-start: 1;
  grid-column-end: 2;
}

.col12 {
  grid-column-start: 1;
  grid-column-end: 3;
}

.col123 {
  grid-column-start: 1;
  grid-column-end: 4;
}

.col1234 {
  grid-column-start: 1;
  grid-column-end: 5;
}

.col2 {
  grid-column-start: 2;
  grid-column-end: 3;
}

.col23 {
  grid-column-start: 2;
  grid-column-end: 4;
}

.col234 {
  grid-column-start: 2;
  grid-column-end: 5;
}

.col3 {
  grid-column-start: 3;
  grid-column-end: 4;
}

.col34 {
  grid-column-start: 3;
  grid-column-end: 5;
}

.col4 {
  grid-column-start: 4;
  grid-column-end: 5;
}

次に、vue-cli# を実行しましょう。 ## デフォルトのファイルにいくつかの変更を追加しました。

HelloWorld.vue を src/components フォルダーから削除し、それに関連するものをすべて src/App.vue から削除します。 App.vue の HTML マークアップと CSS スタイルに次の変更を加えます。

<template>
  <div id="app">
    <h1 class="row1 col12">Alligator Nest</h1>
    <a class="row1 col3">Travels</a>
    <a class="row1 col4">About</a>
    <div class="row2 col234"></div>
  </div>
</template>
html, body {
  height: 100vh;
  width: 100vw;
  padding: 0;
  margin: 0;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  padding: 2%;
  height: 100%;
  display: grid;
  grid-template-rows: 20% 80%;
  grid-template-columns: 25% 25% 25% 25%;
}

プロジェクトのルート ディレクトリで

npm runserve を実行している場合は、ブラウザの localhost:8080 にカーソルを置くと、フレーム レイアウトが表示されます。これらの display:grid プロパティは便利です。これで、ルートの作成を開始できます。

Vue ルーティングを入力します

/components フォルダーに AboutPage.vue という名前のコンポーネントを作成します。次のようになります。

<template>
  <div>
    <h2>About</h2>
    <p>Alligators were around during the time of the dinosaurs.</p>
  </div>
</template>

<script>
  export default {
    name: &#39;AboutPage&#39;,
  }
</script>

<style scoped>
  
</style>

これで、

main.js ファイルには /about ルートが必要になります。こんな感じです。

import VueRouter from 'vue-router';
import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

import VueRouter from 'vue-router';
Vue.use(VueRouter);

import AboutPage from './components/AboutPage.vue';

const routes = [
  { path: '/about', component: AboutPage },
]

const router = new VueRouter({
  routes
})

new Vue({
  render: h => h(App),
  router
}).$mount('#app');

最後に、

App.vue に戻り、「About」アンカー タグを ## 属性 to="/about" #&lt に変更します。 ;router-link> タグ。次に、2 番目の div を <router-view> タグに変更します。グリッド配置クラスのプロパティは変更しないようにしてください。 これで、「About」ページのルーティングが処理される、完全に機能するサイト スケルトンが完成しました。

ここではルーティング機能に焦点を当てているため、スタイルについてはあまり時間をかけません。それでも、

Travels

ページをもう少し洗練されたものにしたいと考えています。

まず、

---

AboutPage

の作成と同じ方法で TravelPage を作成します。 main.js で参照します。 次の 2 つのコンポーネントも作成する必要があります。これらは最終的に

TravelPage.vue

にネストされます:

TravelAmericaPage.vue

<template>
  <div>
    <p>Alligators can be found in the American states of Louisiana and Florida.</p>
  </div>
</template>

<script>
  export default {
    name: &#39;TravelAmericaPage&#39;
  }
</script>

<style scoped>
</style>

TravelChinaPage.vue

<template>
  <div>
    <p>Alligators can be found in China&#39;s Yangtze River Valley.</p>
  </div>
</template>

<script>
  export default {
    name: &#39;TravelChinaPage&#39;
  }
</script>

<style scoped>

</style>

ネストされたルーティングの構成

次に、

main.js

と TravelPage .vue の両方を更新しましょう。 を使用して、これらのネストされたルートを参照します。 main.js は、routes 定数の次の定義を持つように更新する必要があります: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">const routes = [ { path: &amp;#39;/travel&amp;#39;, component: TravelPage, children: [ { path: &amp;#39;/travel/america&amp;#39;, component: TravelAmericaPage }, { path: &amp;#39;/travel/china&amp;#39;, component: TravelChinaPage} ] }, { path: &amp;#39;/about&amp;#39;, component: AboutPage } ];</pre><div class="contentsignin">ログイン後にコピー</div></div>子のネストは無期限に継続できることに注意してください。 と

TravelPage.vue

は次のように記述できます:

TravelPage.vue

<template>
  <div id="travel">
    <h2 class="row1">Travels</h2>
    <div class="flex-container row2">
      <router-link to="/travel/america">America</router-link>
      <router-link to="/travel/china">China</router-link>
    </div>
    <router-view class="row3"></router-view>
  </div>
</template>

<script>
  export default {
    name: &#39;TravelPage&#39;
  }
</script>

<style scoped>
div {
  text-align: center;
}

#travel {
  display: grid;
  grid-template-rows: 20% 40% 40%;
}

.flex-container {
  display: flex;
  justify-content: space-around;
}
</style>

checkoutlocalhost :8080 、「旅行」ページには 2 つのサブページが含まれていることがわかります。いずれかのリンクをクリックすると、それに応じて URL が更新されます。

概要このチュートリアルが、ネストされたルーティングの使用方法を理解するのに役立つことを願っています。

このトピックに関するもう 1 つの注意事項 - 動的セグメント (例:

path:'/location/:id'

) を使用してルートを定義できます。その ID は、それらのルートのビューで

this.$route.params

として参照できます。この機能は、Web サイトやアプリでより特定の種類のデータ (ユーザー、画像など) を表示する場合に便利です。 英語の元のアドレス: https://alligator.io/vuejs/nested-routes/

翻訳アドレス: https://segmentfault.com/a/1190000021930656

関連する推奨事項:

2020 フロントエンド vue インタビューの質問の概要 (回答付き)

vue チュートリアル推奨: 2020 年の最新の vue.js ビデオ チュートリアル 5 選

プログラミング関連の知識の詳細については、プログラミング入門

をご覧ください。 ！

以上がVue.jsでネストしたルーティングを使う方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。