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

<テンプレート>
  <div class="home">
    <h1>ホーム</h1>
    <router-link to="/home/news">ニュース</router-link> // ここでフルパスを記述する必要があることに注意してください。/news だけを記述することはできません。/home を追加する必要があります。
    <router-link to="/home/message">情報クラス</router-link>
    <ルータービュー></ルータービュー>
  </div>
</テンプレート>

<スクリプト>

エクスポートデフォルト{
  名前: "ホーム",
};
</スクリプト>

<スタイルスコープ>

</スタイル>

<テンプレート>
  <div class="homeニュース">
    <ul>
      <li>ニュース 1</li>
      <li>ニュース 2</li>
      <li>ニュース 3</li>
      <li>ニュース4</li>
    </ul>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 「ホームニュース」
}
</スクリプト>

<スタイルスコープ>

</スタイル>

<テンプレート>
  <div class="homeMessage">
    <ul>
      <li>メッセージ 1</li>
      <li>メッセージ 2</li>
      <li>メッセージ 3</li>
      <li>メッセージ 4</li>
    </ul>
  </div>
</テンプレート>

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

<スタイルスコープ>

</スタイル>

「vue」からVueをインポートします。
「vue-router」から VueRouter をインポートします。

Vue.use(VueRouter);

// ここでもルーティング遅延読み込みを使用します const Home = () => import('../views/Home')
const HomeNews = () => import('../views/HomeNews')
const HomeMessage = () => import('../views/HomeMessage')

定数ルート = [
  {
    パス: "/home",
    名前: "ホーム",
    コンポーネント: ホーム、
    // 子ルートの書き方 children: [
      {
        パス: "ニュース",
        名前: "HomeNews",
        コンポーネント: ホームニュース
      },
      {
        パス: "メッセージ",
        名前: "HomeMessage",
        コンポーネント: HomeMessage
      },
    ]
  },
  {
    パス： ""、
    リダイレクト: "ホーム"
  }
];

const ルーター = 新しい VueRouter({
  ルート、
  モード: '履歴'、
});

デフォルトルーターをエクスポートします。

定数ルート = [
  {
    パス: "/home",
    名前: "ホーム",
    コンポーネント: ホーム、
    子供たち： [
      {
        パス: "ニュース",
        名前: "HomeNews",
        コンポーネント: ホームニュース
      },
      {
        パス: "メッセージ",
        名前: "HomeMessage",
        コンポーネント: HomeMessage
      },
      // 空のサブルートを追加 {
        パス： ""、
        リダイレクト: 「ニュース」
      }
    ]
  },

  {
    パス： ""、
    リダイレクト: "ホーム"
  }
];