Vue Router を使用してマルチレベルのルーティングのネストとマッチングを実装するにはどうすればよいですか?

Vue Router を使用してマルチレベルのルーティングのネストとマッチングを実装するにはどうすればよいですか?

Vue Router は Vue.js の公式ルーティング マネージャーであり、シングル ページ アプリケーション (SPA) でのルーティング機能の実装に役立ちます。 Vue Router では、ルーティングテーブルを設定することでさまざまなルーティングルールを定義し、ルートジャンプやマッチングを実装することができます。この記事では、Vue Router を使用してマルチレベルのルートのネストとマッチングを実装する方法に焦点を当てます。

1. Vue Router のインストール

まず、プロジェクトに Vue Router をインストールする必要があります。 npm または Yarn コマンドを使用して Vue Router をインストールできます。

npm install vue-router

or

yarn add vue-router

2. ルーティング インスタンスの作成

Vue プロジェクトでは、ルーティング インスタンスを作成し、それをルート インスタンスに接続する必要があります。 Vue関連。ルーティング インスタンスを作成する前に、まずルーティング テーブルを作成して、さまざまなルーティング ルールを定義する必要があります。ルーティング テーブルはルーティング構成オブジェクトで構成される配列であり、各ルーティング構成オブジェクトにはルーティング パスと対応するコンポーネントが含まれます。

プロジェクトには、次のようなマルチレベルのルーティングの入れ子構造があるとします。

- Home - About - Contact - News - Detail

ルーティング テーブルに次のルーティング ルールを定義できます。

import Vue from 'vue' import VueRouter from 'vue-router' import Home from '@/components/Home.vue' import About from '@/components/About.vue' import Contact from '@/components/Contact.vue' import News from '@/components/News.vue' import Detail from '@/components/Detail.vue' Vue.use(VueRouter) const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: About, children: [ { path: 'contact', name: 'Contact', component: Contact } ] }, { path: '/news', name: 'News', component: News, children: [ { path: 'detail', name: 'Detail', component: Detail } ] } ] const router = new VueRouter({ mode: 'history', routes }) export default router

上記のルーティングでは、 table では、次のルーティング ルールを定義しました。

• /パスに対応するコンポーネントは、Home.vue
• /about## です。 # path 対応するコンポーネントは About.vue
• /about/contactパスに対応するコンポーネントは Contact.vue
• /newsですパスに対応するコンポーネントは News.vue
• /news/detailパスに対応するコンポーネントは Detail.vue

構成ルート コンポーネント

#ラベル内の ##。

import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false new Vue({ router, render: h => h(App), }).$mount('#app')

appの DOM ノードにマウントします。Vue コンポーネントで