Vue-Router を使用して Vue アプリケーションでネストされたルーティングを実装するにはどうすればよいですか?

Vue-Router を使用して Vue アプリケーションにネストされたルーティングを実装するにはどうすればよいですか?

Vue-Router は Vue.js の公式ルーティング マネージャーであり、シングルページ アプリケーションにルーティング機能を簡単に実装するのに役立ちます。実際のプロジェクト開発では、ネストされたルーティングが必要なシナリオに遭遇することがよくあります。たとえば、ユーザー管理システムでは、ホームページの他に、ユーザーリストやユーザーの詳細などのサブページもあります。この記事では、Vue-Router を使用して Vue アプリケーションにネストされたルーティングを実装する方法を紹介し、具体的なコード例を示します。

まず、Vue-Router をインストールする必要があります。 npm または Yarn を使用して Vue-Router の依存関係をインストールできます:

npm install vue-router
# 或者
yarn add vue-router

インストール後、Vue アプリケーションのエントリ ファイルに Vue-Router をインポートし、Vue.use() メソッドを使用して登録する必要があります。

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

次に、ルーティング インスタンスを作成してルーティングを構成できます。

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/users',
    component: Users,
    children: [
      {
        path: ':id',
        component: UserDetails
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

export default router

上記のコードでは、ルート ルート "/" と、対応するコンポーネントの 2 つのルートを定義します。は Home、もう 1 つはユーザー ルート「/users」で、対応するコンポーネントは Users です。ユーザールーティングでは、サブルート「:id」を定義し、対応するコンポーネントはUserDetailsです。

次に、Vue インスタンスでルーター インスタンスを使用する必要があります。

import Vue from 'vue'
import App from './App.vue'
import router from './router' // 导入路由实例

new Vue({
  router, // 使用router实例
  render: h => h(App),
}).$mount('#app')

これで、Vue-Router の基本構成が完了しました。次に、Home、Users、および UserDetails コンポーネントをそれぞれ作成し、対応するルートでコンポーネントをレンダリングできます。

まず、ホーム コンポーネントを作成しましょう:

<template>
  <div>
    <h1>Home</h1>
  </div>
</template>

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

次に、ユーザー コンポーネントを作成して、ユーザー リストを表示し、このコンポーネントにユーザーの詳細へのリンクを表示します:

<template>
  <div>
    <h1>Users</h1>
    <ul>
      <li v-for="user in users" :key="user.id">
        <router-link :to="'/users/' + user.id">{{ user.name }}</router-link>
      </li>
    </ul>
    <router-view></router-view> <!--显示子路由组件-->
  </div>
</template>

<script>
export default {
  name: 'Users',
  data() {
    return {
      users: [
        { id: 1, name: 'User 1' },
        { id: 2, name: 'User 2' },
        { id: 3, name: 'User 3' }
      ]
    }
  }
}
</script>

最後にでは、ユーザーの詳細情報を表示する UserDetails コンポーネントを作成します。

<template>
  <div>
    <h2>User Details</h2>
    <p>ID: {{ $route.params.id }}</p>
    <p>Name: {{ user.name }}</p>
  </div>
</template>

<script>
export default {
  name: 'UserDetails',
  computed: {
    user() {
      const userId = parseInt(this.$route.params.id)
      return this.users.find(user => user.id === userId)
    }
  },
  data() {
    return {
      users: [
        { id: 1, name: 'User 1' },
        { id: 2, name: 'User 2' },
        { id: 3, name: 'User 3' }
      ]
    }
  }
}
</script>

上記のコードでは、$route.params.id を使用してルート内の動的パラメーターを取得し、このパラメーターに基づいてそれらを取得します。情報。

これで、Vue-Router のネストされたルーティングの設定とコンポーネントの作成が完了しました。ブラウザでアプリケーションにアクセスすると、ホームページとユーザーのリストへのナビゲーション リンクが表示されます。 「ユーザー」リンクをクリックするとユーザーのリストが表示され、各ユーザーのリンクをクリックしてユーザーの詳細を表示できます。

要約すると、Vue-Router を使用して Vue アプリケーションにネストされたルーティングを実装するには、次の手順を実行する必要があります:

1. Vue-Router をインストールしてインポートします。
2. ルーティング インスタンスを作成し、ルーティングを構成します。
3. Vue インスタンスでルーター インスタンスを使用します。
4. 対応するコンポーネントを作成し、必要なルートでコンポーネントをレンダリングします。
5. ビューで タグを使用して、サブ配線コンポーネントを表示します。

上記の手順により、Vue アプリケーションにネストされたルーティング関数を正常に実装できるようになります。ハッピーライティング！

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