Wie verwende ich Routing, um öffentliche Komponenten in einem Vue-Projekt zu kapseln?

So verwenden Sie Routing, um öffentliche Komponenten in einem Vue-Projekt zu kapseln

Während des Entwicklungsprozesses eines Vue-Projekts stoßen wir häufig auf Situationen, in denen dieselbe Komponente auf mehreren Seiten verwendet werden muss. Um zu vermeiden, dass ähnlicher Code wiederholt geschrieben wird, können wir diese gemeinsamen Komponenten kapseln und sie durch Routing auf verschiedenen Seiten verwenden.

Im Folgenden veranschaulichen wir anhand eines einfachen Beispiels, wie man mithilfe von Routing öffentliche Komponenten in einem Vue-Projekt kapselt. Nehmen wir an, wir haben ein Projekt mit zwei Seiten: Home.vue und About.vue. Beide Seiten müssen eine öffentliche Komponente namens UserInfo.vue verwenden, um Benutzerinformationen anzuzeigen.

Erstellen Sie zunächst einen Ordner mit dem Namen „components“ im Projekt. Erstellen Sie in diesem Ordner eine Datei mit dem Namen UserInfo.vue, um den Code öffentlicher Komponenten zu speichern.

Der Code von UserInfo.vue lautet wie folgt:

<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>

Als nächstes erstellen Sie einen Ordner mit dem Namen router im src-Ordner des Projekts. Erstellen Sie in diesem Ordner eine Datei mit dem Namen index.js, um Routing-Informationen zu konfigurieren.

Der Code von index.js lautet wie folgt:

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

Führen Sie als Nächstes die öffentliche Komponente UserInfo.vue in den Dateien Home.vue bzw. About.vue ein und verwenden Sie sie. Der Code von

Home.vue lautet wie folgt:

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

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

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

Der Code von About.vue lautet wie folgt:

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

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

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

Ändern Sie abschließend die App.vue-Datei des Projekts und verschachteln Sie das Tag vue-router router-view Die entsprechende Position wird verwendet, um die entsprechende Ansicht basierend auf der Route anzuzeigen.

Der Code von App.vue lautet wie folgt:

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

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

Zu diesem Zeitpunkt haben wir erfolgreich eine öffentliche Komponente im Vue-Projekt gekapselt und sie dann durch Routing auf verschiedenen Seiten verwendet. Auf diese Weise können wir Zeit und Code sparen und die Entwicklungseffizienz des Projekts verbessern.

Es ist zu beachten, dass Sie bei der Verwendung von Routing zur Kapselung öffentlicher Komponenten sicherstellen müssen, dass der Vue-Router korrekt installiert und konfiguriert wurde und auf der Seite, die die Verwendung öffentlicher Komponenten erfordert, korrekt eingeführt und registriert ist.

Das Obige beschreibt, wie man Routing verwendet, um öffentliche Komponenten im Vue-Projekt zu kapseln. Ich hoffe, es wird für alle hilfreich sein.

Das obige ist der detaillierte Inhalt vonWie verwende ich Routing, um öffentliche Komponenten in einem Vue-Projekt zu kapseln?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!