Routenführung

Verzeichnis

• Offizielle Route

• Einfaches Routing von Grund auf

• Drittanbieter-Routing integrieren

Offizielles Routing

Für die meisten Single-Page-Anwendungen wird empfohlen, die offiziell unterstützte zu verwenden Vue-Router-Bibliothek. Weitere Informationen finden Sie in der Vue-Router-Dokumentation.

Einfaches Routing von Grund auf

Wenn Sie nur sehr viel brauchen Für einfaches Routing ohne Einführung einer voll funktionsfähigen Routing-Bibliothek können Sie eine Komponente auf Seitenebene wie folgt dynamisch rendern:

const NotFound = { template: '<p>Page not found</p>' }
const Home = { template: '<p>home page</p>' }
const About = { template: '<p>about page</p>' }

const routes = {
  '/': Home,
  '/about': About
}

new Vue({
  el: '#app',
  data: {
    currentRoute: window.location.pathname
  },
  computed: {
    ViewComponent () {
      return routes[this.currentRoute] || NotFound
    }
  },
  render (h) { return h(this.ViewComponent) }
})

kombiniert Mit der HTML5 History API können Sie einen ebenso kleinen wie vollständigen clientseitigen Router erstellen. Sie können die Beispielanwendung direkt sehen.

Drittanbieter-Routing integrieren

Wenn Sie ein bevorzugtes Drittanbieter-Routing haben , Wie zum Beispiel Page.js oder Direktor, die Integration ist so einfach. Hier ist ein vollständiges Beispiel mit Page.js.