vue.js ルーターのネストされたルートの実例

$ npm インストール -g @vue/cli

$ 糸グローバル追加 @vue/cli

$ vue ワニの巣を作成します

$ npm インストール vue-router

.行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;
}

<テンプレート>
  <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%;
}

<テンプレート>
  <div>
    <h2>について</h2>
    <p>ワニは恐竜の時代にも存在していました。</p>
  </div>
</テンプレート>

<スクリプト>
  エクスポートデフォルト{
    名前: 'AboutPage',
  }
</スクリプト>

<スタイルスコープ>
  
</スタイル>

'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');

<テンプレート>
  <div>
    <p>ワニはアメリカのルイジアナ州とフロリダ州に生息しています。</p>
  </div>
</テンプレート>

<スクリプト>
  エクスポートデフォルト{
    名前: 'TravelAmericaPage'
  }
</スクリプト>

<スタイルスコープ>
</スタイル>

<テンプレート>
  <div>
    <p>ワニは中国の揚子江流域に生息しています。</p>
  </div>
</テンプレート>

<スクリプト>
  エクスポートデフォルト{
    名前: 'TravelChinaPage'
  }
</スクリプト>

<スタイルスコープ>

</スタイル>

定数ルート = [
  {
    パス: '/travel'、コンポーネント: TravelPage、
    子供たち： [
      { パス: '/travel/america'、コンポーネント: TravelAmericaPage },
      { パス: '/travel/china'、コンポーネント: TravelChinaPage}
    ]
  },
  {
    パス: '/about'、コンポーネント: AboutPage
  }
];

<テンプレート>
  <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-コンテナ{
  ディスプレイ: フレックス;
  コンテンツの両端揃え: スペースを空ける;
}
</スタイル>