Verwendung von Vue3-Seiten, Menüs und Routen

importiere { createRouter, createWebHistory, RouteRecordRaw } von 'vue-router'
Home aus '../views/home.vue' importieren
Importieren Sie „Info“ aus „../views/about.vue“.

const routes: Array<RouteRecordRaw> = [
  {
    Weg: '/',
    Name: "Home",
    Komponente: Startseite
  },
  {
    Pfad: '/about',
    Name: 'Über',
    Komponente: Über
    // Code-Aufteilung auf Routenebene
    // dies erzeugt einen separaten Block (about.[hash].js) für diese Route
    //Ich musste es aufgrund des Lazy Loading löschen}
]

const router = createRouter({
  Verlauf: createWebHistory(process.env.BASE_URL),
  Routen
})

Standardrouter exportieren

<Vorlage>
  <div Klasse="Über">
    <h1>E-Book-Verwaltungsseite</h1>
  </div>
</Vorlage>

importiere {createRouter, createWebHistory, RouteRecordRaw} von 'vue-router'
Home aus '../views/home.vue' importieren
Importieren Sie „Info“ aus „../views/about.vue“.
importiere AdminEbook aus '../views/admin/admin-ebook.vue'

const routes: Array<RouteRecordRaw> = [
  {
    Weg: '/',
    Name: "Home",
    Komponente: Startseite
  },
  {
    Pfad: '/about',
    Name: 'Über',
    Komponente: Über
  },
  {
    Pfad: '/admin/admin-ebook',
    Name: 'AdminEbook',
    Komponente: AdminEbook
  }
]

const router = createRouter({
  Verlauf: createWebHistory(process.env.BASE_URL),
  Routen
})

Standardrouter exportieren

<Vorlage>
    <a-layout-header Klasse="Header">
      <div Klasse="Logo" />
      <a-Menü
          Thema="dunkel"
          Modus="horizontal"
          :style="{ Zeilenhöhe: '64px' }"
      >
        <a-menu-item key="/">
          <router-link to="/">Zuhause</router-link>
        </a-Menüelement>
        <a-menu-item key="/admin/admin-ebook">
          <router-link to="/admin/admin-ebook">E-Book-Verwaltungsseite</router-link>
        </a-Menüelement>
        <a-menu-item key="3">
          <router-link to="/about">Über uns</router-link>
        </a-Menüelement>
      </a-Menü>
    </a-layout-header>
</Vorlage>

<script lang="ts">
importiere {defineComponent} aus „vue“;

exportiere StandarddefiniereKomponente({
  Name: "TheHeader",
});
</Skript>