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

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

Vue ルート インスタンスでは、作成したルーティング インスタンスを Vue のルート インスタンスに関連付け、ルーティング コンポーネントを Vue ルート インスタンスにレンダリングする必要があります

#ラベル内の ##。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:javascript;toolbar:false;'>import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false new Vue({ router, render: h =&gt; h(App), }).$mount('#app')</pre><div class="contentsignin">ログイン後にコピー</div></div>上記のコードでは、作成したルーティング インスタンスをルーター オプションを通じて Vue ルート インスタンスに挿入し、

$mount('#app')## を通じて Vue ルート インスタンスをマウントします。 # メソッド ID

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

および
4. コンポーネント を使用します。

コンポーネントを使用してルート間を移動し、

コンポーネントを使用して、対応するルーティング コンポーネントをレンダリングできます。

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-link to="/about/contact">Contact</router-link>
    <router-link to="/news">News</router-link>
    <router-link to="/news/detail">Detail</router-link>
    <hr>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

上記のコードでは、 コンポーネントを介して複数のルーティング ジャンプ リンクを定義し、それぞれ対応するパスにジャンプします。

タグでは、Vue Router を使用して、対応するルーティング コンポーネントを動的にレンダリングします。 上記の手順を使用すると、Vue プロジェクトでマルチレベルのルーティングのネストとマッチングを実装できます。さまざまなルーティング リンクをクリックすると、ページは対応するルーティング コンポーネントをレンダリングして、ページの動的な切り替えとネストを実現します。

概要

この記事では、Vue Router を使用してマルチレベルのルーティングのネストとマッチングを実装する方法を紹介します。ルーティング テーブルを作成し、Vue ルート インスタンスでルーティング インスタンスを関連付けることで、Vue プロジェクトでマルチレベルのルーティング ルールを定義し、ルート間のジャンプとマッチングを実装できます。同時に、Vue コンポーネントの

コンポーネントと

コンポーネントを使用してルーティング リンクのレンダリングを実装する方法も紹介しました。ルーティングコンポーネント。 Vue Router を使用してマルチレベルのルーティングのネストとマッチングを実装する際に、この記事が役立つことを願っています。 参考

Vue Routerの公式ドキュメント: https://router.vuejs.org/

以上がVue Router を使用してマルチレベルのルーティングのネストとマッチングを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。