Einführungs-Tutorial zur VUE3-Entwicklung: Verwenden des Front-End-Routings von Vue.js

Vue.js ist derzeit eines der beliebtesten JavaScript-Frameworks. Es wird aufgrund seiner Einfachheit, Benutzerfreundlichkeit, Effizienz und Geschwindigkeit in verschiedenen Front-End-Projekten verwendet. Insbesondere nach der Veröffentlichung der VUE3-Version sind die Prinzipien und das Design klarer geworden und auch die Leistung wurde erheblich verbessert. Wenn Sie nach einer schnellen und einfachen Möglichkeit suchen, eine moderne Front-End-Website oder -Anwendung zu entwickeln, lohnt es sich, Vue.js zu erlernen und zu beherrschen. In diesem Artikel wird ein Einführungs-Tutorial für die VUE3-Entwicklung vorgestellt, das sich auf die Verwendung des Vue.js-Front-End-Routings konzentriert.

Welche Rolle spielt das Front-End-Routing von Vue.js?

In einer Single-Page-Anwendung wird der Seitenwechsel durch Front-End-Routing erreicht. Front-End-Routing bedeutet, dass in Webanwendungen die URL-Adresse unverändert bleibt und der Inhalt der Seite durch JavaScript geändert wird, um ein asynchrones Laden und keinen Aktualisierungswechsel zu erreichen. Es verknüpft unterschiedliche URLs mit unterschiedlichen Komponenten oder Seitenvorlagen und bildet so ein vollständiges Front-End-Routing-System. In Vue.js können wir die Front-End-Routing-Funktion über das Vue-Router-Plug-In implementieren.

Einführung in Vue-Router

Vue-Router ist ein offiziell von Vue.js bereitgestelltes Routing-Plug-In, das zur Implementierung der Front-End-Routing-Funktion von Single-Page-Anwendungen verwendet wird. Es ist eng in Vue.js integriert und erleichtert so die Entwicklung von Single-Page-Anwendungen mit Vue.js. Es bietet eine Vielzahl von Routing-Modi und unterstützt umfangreiche Funktionen wie dynamisches Routing, verschachteltes Routing, benanntes Routing usw. Und Vue-Router unterstützt auch das verzögerte Laden von Routen, was die Anwendungsleistung verbessert.

Vue-Router installieren

Bevor Sie Vue-Router verwenden, müssen Sie zuerst das Vue-Router-Plug-In installieren. Sie können es über den npm-Befehl installieren:

npm install vue-router

Definieren Sie den Router von Vue.js

Bevor Sie vue-router verwenden, müssen Sie den Router definieren. Der Router ist eine der Kernkomponenten von Vue-Router. Er ist für die Weiterleitung und Zuordnung aller URL-Anfragen sowie für die Bereitstellung der übereinstimmenden Komponenten im angegebenen Bereich verantwortlich.

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

export default router

Im obigen Code stellen wir zunächst Vue und VueRouter vor und installieren VueRouter über die Methode Vue.use() in Vue. Anschließend werden zwei Routing-Regeln definiert, die der Homepage bzw. der About-Seite entsprechen. Diese Regeln werden über die Attribute „Pfad“, „Name“ und „Komponente“ definiert. Abschließend übergeben wir diese Regeln an eine neue VueRouter-Instanz und exportieren das Router-Objekt.

Verwenden des Front-End-Routings von Vue.js

Nachdem wir den Router definiert haben, müssen wir ihn in der Vue-Komponente verwenden. Vue-Komponenten können zum Rendern verschiedener Bereiche auf der Seite verwendet werden. Wir können die integrierte Komponenten-Router-Ansicht von Vue.js verwenden, um die übereinstimmenden Komponenten anzuzeigen.

<template>
  <div class="wrapper">
    <h1>{{ msg }}</h1>
    <ul>
      <li><router-link to="/">Home</router-link></li>
      <li><router-link to="/about">About</router-link></li>
    </ul>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      msg: 'Welcome to my VUE3 Web App!'
    }
  }
}
</script>

router-link ist eine integrierte Komponente von Vue.js, die zum Generieren von Links und zum Zuordnen von Links zu Routern verwendet wird. Wenn der Benutzer auf einen Link klickt, rendert Router automatisch die Vue-Komponente, die dem Link entspricht.

Zusammenfassung

Dieser Artikel stellt das Einführungs-Tutorial für die VUE3-Entwicklung vor und konzentriert sich auf die Verwendung des Vue.js-Front-End-Routings. Vue.js ist ein großartiges JavaScript-Framework, das sich besonders für die Entwicklung von Single-Page- und mobilen Anwendungen eignet. Das Routing-Modul vue-router von Vue.js verfügt über viele hervorragende Funktionen, mit denen wir ganz einfach Routing-Funktionen entwickeln können. Ich hoffe, dass die Einführung in diesem Artikel Anfängern helfen kann, die Routing-Funktion von Vue.js besser zu beherrschen.

Das obige ist der detaillierte Inhalt vonEinführungs-Tutorial zur VUE3-Entwicklung: Verwenden des Front-End-Routings von Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!