vue.js Router verschachtelte Routen

<Vorlage>
  <div Klasse="Startseite">
    <h1>Startseite</h1>
    <router-link to="/home/news">News</router-link> // Beachten Sie, dass Sie hier den vollständigen Pfad angeben müssen. Sie können nicht einfach /news schreiben. Sie müssen /home hinzufügen.
    <router-link to="/home/message">Informationsklasse</router-link>
    <Router-Ansicht></Router-Ansicht>
  </div>
</Vorlage>

<Skript>

Standard exportieren {
  Name: "Home",
};
</Skript>

<Stilbereich>

</Stil>

<Vorlage>
  <div Klasse="homeNews">
    <ul>
      <li>Neuigkeiten 1</li>
      <li>Neuigkeiten 2</li>
      <li>Neuigkeiten 3</li>
      <li>Neuigkeiten 4</li>
    </ul>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "HomeNews"
}
</Skript>

<Stilbereich>

</Stil>

<Vorlage>
  <div Klasse="Home-Nachricht">
    <ul>
      <li>Nachricht 1</li>
      <li>Nachricht 2</li>
      <li>Nachricht 3</li>
      <li>Nachricht 4</li>
    </ul>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "HomeMessage"
}
</Skript>

<Stilbereich>

</Stil>

importiere Vue von „vue“;
importiere VueRouter von „vue-router“;

Vue.use(VueRouter);

// Hier verwenden wir immer noch Routing Lazy Loading const Home = () => import('../views/Home')
const HomeNews = () => import('../views/HomeNews')
const HomeMessage = () => import('../views/HomeMessage')

const Routen = [
  {
    Pfad: "/home",
    Name: "Home",
    Komponente: Home,
    // So schreiben Sie untergeordnete Routen children: [
      {
        Pfad: "Neuigkeiten",
        Name: "HomeNews",
        Komponente: HomeNews
      },
      {
        Pfad: "Nachricht",
        Name: "HomeMessage",
        Komponente: HomeMessage
      },
    ]
  },
  {
    Weg: "",
    Weiterleitung: "Home"
  }
];

const router = neuer VueRouter({
  Routen,
  Modus: "Verlauf",
});

Standardrouter exportieren;

const Routen = [
  {
    Pfad: "/home",
    Name: "Home",
    Komponente: Home,
    Kinder: [
      {
        Pfad: "Neuigkeiten",
        Name: "HomeNews",
        Komponente: HomeNews
      },
      {
        Pfad: "Nachricht",
        Name: "HomeMessage",
        Komponente: HomeMessage
      },
      // Füge eine leere Unterroute hinzu {
        Weg: "",
        Weiterleitung: "Neuigkeiten"
      }
    ]
  },

  {
    Weg: "",
    Weiterleitung: "Home"
  }
];