ルーティングを使用して Vue プロジェクトのパブリック コンポーネントをカプセル化するにはどうすればよいですか?

ルーティングを使用して Vue プロジェクトのパブリック コンポーネントをカプセル化する方法

Vue プロジェクトの開発プロセス中に、同じコンポーネントを複数のページで使用する必要があることがよくあります。同様のコードを繰り返し記述することを避けるために、これらの共通コンポーネントをカプセル化し、ルーティングを通じて異なるページで使用できます。

以下では、簡単な例を使用して、ルーティングを使用して Vue プロジェクトのパブリック コンポーネントをカプセル化する方法を説明します。 Home.vue と About.vue という 2 つのページを持つプロジェクトがあるとします。どちらのページでも、ユーザー情報を表示するには UserInfo.vue というパブリック コンポーネントを使用する必要があります。

まず、プロジェクト内に「components」という名前のフォルダーを作成します。このフォルダーに UserInfo.vue という名前のファイルを作成し、パブリック コンポーネントのコードを保存します。

UserInfo.vue のコードは次のとおりです。

<template>
  <div>
    <h2>User Info</h2>
    <p>Name: {{ user.name }}</p>
    <p>Age: {{ user.age }}</p>
  </div>
</template>

<script>
export default {
  name: 'UserInfo',
  data() {
    return {
      user: {
        name: 'John',
        age: 25,
      },
    }
  },
}
</script>

次に、プロジェクトの src フォルダーの下に router という名前のフォルダーを作成します。このフォルダーにindex.jsという名前のファイルを作成し、ルーティング情報を構成します。

index.js のコードは次のとおりです。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
})

export default router

次に、パブリック コンポーネント UserInfo.vue を Home.vue ファイルと About.vue ファイルにそれぞれ導入して使用します。

Home.vue のコードは次のとおりです。

<template>
  <div>
    <h1>Home Page</h1>
    <UserInfo />
  </div>
</template>

<script>
import UserInfo from '@/components/UserInfo.vue'

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

About.vue のコードは次のとおりです。

<template>
  <div>
    <h1>About Page</h1>
    <UserInfo />
  </div>
</template>

<script>
import UserInfo from '@/components/UserInfo.vue'

export default {
  name: 'About',
  components: {
    UserInfo,
  },
}
</script>

最後に、App.vue ファイルを変更します。 project と vue の追加 -router router-view タグは、ルートに基づいて対応するビューを表示するために、適切な位置にネストされます。

App.vue のコードは次のとおりです:

<template>
  <div id="app">
    <router-view />
  </div>
</template>

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

これまでのところ、Vue プロジェクトでパブリック コンポーネントを正常にカプセル化し、ルーティングを通じてそれをさまざまなページで使用することができました。このようにして、時間とコードを節約し、プロジェクトの開発効率を向上させることができます。

ルーティングを使用してパブリック コンポーネントをカプセル化する場合、vue-router が正しくインストールおよび構成されていること、およびパブリック コンポーネントの使用を必要とするページに正しく導入および登録されていることを確認する必要があることに注意してください。 。

上記は、ルーティングを使用して Vue プロジェクトでパブリック コンポーネントをカプセル化する方法です。

以上がルーティングを使用して Vue プロジェクトのパブリック コンポーネントをカプセル化するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。