Vue-Router2 implementiert eine Beispielerklärung zur Routing-Funktion
vue-router ist das offizielle Routing-Plug-in von Vue.js. Es ist tief in vue.js integriert und eignet sich zum Erstellen von Single-Page-Anwendungen. Die Single-Page-Anwendung von Vue basiert auf Routing und Komponenten. Routing wird zum Festlegen von Zugriffspfaden und zum Zuordnen von Pfaden und Komponenten verwendet. Herkömmliche Seitenanwendungen verwenden einige Hyperlinks, um Seitenwechsel und -sprünge zu erreichen. In der Vue-Router-Single-Page-Anwendung wird zwischen Pfaden gewechselt, dh zwischen Komponenten.
Hinweis: Vue-Router 2 gilt nur für die Vue2.x-Version. Im Folgenden wird erläutert, wie Sie Vue-Router 2 verwenden, um die Routing-Funktion basierend auf Vue2.0 zu implementieren.
Es wird empfohlen, für die Installation npm zu verwenden.
npm install vue-router
1. Routing verwenden
In main.js müssen Sie die Routing-Funktion explizit installieren:
import Vue from 'vue' import VueRouter from 'vue-router' import App from './App.vue' Vue.use(VueRouter)
1. Definieren Sie die verwendeten Komponenten hier aus anderen Dateien importieren
import index from './components/index.vue' import hello from './components/hello.vue'
2. Definieren Sie Routen
const routes = [
{ path: '/index', component: index },
{ path: '/hello', component: hello },
]3. Erstellen Sie eine Router-Instanz und übergeben Sie dann die Routenkonfiguration
const router = new VueRouter({
routes
})4. Erstellen und mounten Sie das Root-Beispiel. Fügen Sie Routen über Router-Konfigurationsparameter ein, sodass die gesamte Anwendung über Routing-Funktionen verfügt
const app = new Vue({
router,
render: h => h(App)
}).$mount('#app')Nach der obigen Konfiguration werden die mit der Route übereinstimmenden Komponenten in der
Dann sollte es in App.vue so geschrieben werden:
<template> <p id="app"> <router-view></router-view> </p> </template>
index.html sollte so geschrieben werden:
<body> <p id="app"></p> </body>
Dadurch wird die gerenderte Seite mit der ID der App im p gemountet.
2. Weiterleitung
const routes = [
{ path: '/', redirect: '/index'}, // 这样进/ 就会跳转到/index
{ path: '/index', component: index }
]3. Verschachteltes Routing
const routes = [
{ path: '/index', component: index,
children: [
{ path: 'info', component: info}
]
}
]Auf die Info-Komponente kann über /index/info zugegriffen werden
4 . Lazy Loading
const routes = [
{ path: '/index', component: resolve => require(['./index.vue'], resolve) },
{ path: '/hello', component: resolve => require(['./hello.vue'], resolve) },
]Durch Lazy Loading werden nicht alle Komponenten auf einmal geladen, sondern erst, wenn Sie auf diese Komponente zugreifen. Bei Anwendungen mit vielen Komponenten wird die Erstladegeschwindigkeit verbessert.
5.
Verwenden Sie in Vue-Router 1
Verwenden Sie in Vue-Router 2
<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home" rel="external nofollow" >Home</a>
<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>
<!-- 不写 v-bind 也可以，就像绑定别的属性一样 -->
<router-link :to="'home'">Home</router-link>
<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>
<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>6. Routing-Informationsobjekt
1.$route.path
Zeichenfolge, Der Pfad, der dem aktuellen entspricht Route wird immer als absoluter Pfad aufgelöst, z. B. „/foo/bar“.
2.$route.params
Ein Schlüssel-/Wertobjekt, einschließlich dynamischer Fragmente und vollständig übereinstimmender Fragmente. Wenn keine Routing-Parameter vorhanden sind, handelt es sich um ein leeres Objekt.
3.$route.query
Ein Schlüssel/Wert-Objekt, das URL-Abfrageparameter darstellt. Zum Beispiel für den Pfad /foo?user=1, $route.query.user == 1 oder ein leeres Objekt, wenn keine Abfrageparameter vorhanden sind.
4.$route.hash
Der Hashwert der aktuellen Route (ohne #), wenn kein Hashwert vorhanden ist, handelt es sich um eine leere Zeichenfolge.
5.$route.fullPath
Die URL nach Abschluss der Analyse, einschließlich des vollständigen Pfads der Abfrageparameter und des Hashs.
6.$route.matched
Ein Array, das die Routing-Datensätze aller verschachtelten Pfadfragmente der aktuellen Route enthält. Routendatensätze sind Kopien von Objekten im Routenkonfigurationsarray (und im untergeordneten Array).
Basierend auf dem oben Gesagten sieht eine main.js einschließlich Umleitung, verschachteltem Routing und Lazy Loading wie folgt aus:
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
Vue.use(VueRouter)
const router = new VueRouter({
routes:[
{ path: '/', redirect: '/index' },
{ path: '/index', component: resolve => require(['./components/index.vue'], resolve),
children:[
{ path: 'info', component: resolve => require(['./components/info.vue'], resolve) }
]
},
{ path: '/hello', component: resolve => require(['./components/hello.vue'], resolve) },
]
})
const app = new Vue({
router,
render: h => h(App)
}).$mount('#app')Verwandte Empfehlungen:
Detaillierte Beispiele für URL- und Routing-Funktionen von thinkphp5
Benutzerdefinierte Methode von Node.js zur Implementierung der Datei-Routing-Funktion
Detaillierte Beispiele für die Implementierung von Routing durch NodeJS Funktionen
Das obige ist der detaillierte Inhalt vonVue-Router2 implementiert eine Beispielerklärung zur Routing-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1378
52
Welche Funktionen hat die Doubao-App?
Mar 01, 2024 pm 10:04 PM
Die Doubao-App wird viele KI-Erstellungsfunktionen enthalten. Welche Funktionen bietet die Doubao-App? Benutzer können diese Software verwenden, um Gemälde zu erstellen, mit KI zu chatten, Artikel für Benutzer zu generieren, allen bei der Suche nach Liedern zu helfen usw. Diese Funktionseinführung der Doubao-App kann Ihnen die spezifische Betriebsmethode erklären. Im Folgenden finden Sie den spezifischen Inhalt. Schauen Sie sich um! Welche Funktionen bietet die Doubao-App? Antwort: Sie können zeichnen, chatten, Artikel schreiben und Lieder finden. Funktionseinführung: 1. Fragenabfrage: Sie können KI verwenden, um schneller Antworten auf Fragen zu finden, und Sie können jede Art von Fragen stellen. 2. Bildgenerierung: Mithilfe von KI können für jeden unterschiedliche Bilder erstellt werden. Sie müssen jedem nur die allgemeinen Anforderungen mitteilen. 3. KI-Chat: Kann eine KI erstellen, die für Benutzer chatten kann,
Der Unterschied zwischen vivox100s und x100: Leistungsvergleich und Funktionsanalyse
Mar 23, 2024 pm 10:27 PM
Sowohl die Mobiltelefone vivox100s als auch x100 sind repräsentative Modelle der Mobiltelefonproduktlinie von vivo. Sie repräsentieren jeweils das High-End-Technologieniveau von vivo in unterschiedlichen Zeiträumen. Daher weisen diese beiden Mobiltelefone gewisse Unterschiede in Design, Leistung und Funktionen auf. In diesem Artikel wird ein detaillierter Vergleich dieser beiden Mobiltelefone im Hinblick auf Leistungsvergleich und Funktionsanalyse durchgeführt, um Verbrauchern dabei zu helfen, das für sie geeignete Mobiltelefon besser auszuwählen. Schauen wir uns zunächst den Leistungsvergleich zwischen vivox100s und x100 an. vivox100s ist mit dem Neusten ausgestattet
Was genau ist Self-Media? Was sind seine Hauptmerkmale und Funktionen?
Mar 21, 2024 pm 08:21 PM
Mit der rasanten Entwicklung des Internets ist das Konzept der Selbstmedien tief in den Herzen der Menschen verankert. Was genau ist Self-Media? Was sind seine Hauptmerkmale und Funktionen? Als nächstes werden wir diese Probleme einzeln untersuchen. 1. Was genau ist Self-Media? Wir-Medien bedeuten, wie der Name schon sagt, dass Sie die Medien sind. Dabei handelt es sich um einen Informationsträger, über den Einzelpersonen oder Teams selbstständig Inhalte erstellen, bearbeiten, veröffentlichen und über die Internetplattform verbreiten können. Anders als traditionelle Medien wie Zeitungen, Fernsehen, Radio usw. sind Selbstmedien interaktiver und personalisierter und ermöglichen es jedem, zum Produzenten und Verbreiter von Informationen zu werden. 2. Was sind die Hauptmerkmale und Funktionen von Self-Media? 1. Niedrige Hemmschwelle: Der Aufstieg der Selbstmedien hat die Hemmschwelle für den Einstieg in die Medienbranche gesenkt und es werden keine professionellen Teams mehr benötigt.
Welche Funktionen bietet die Kontoverwaltungssoftware Xiaohongshu? Wie betreibe ich ein Xiaohongshu-Konto?
Mar 21, 2024 pm 04:16 PM
Da Xiaohongshu bei jungen Menschen immer beliebter wird, beginnen immer mehr Menschen, diese Plattform zu nutzen, um verschiedene Aspekte ihrer Erfahrungen und Lebenseinblicke auszutauschen. Die effektive Verwaltung mehrerer Xiaohongshu-Konten ist zu einem zentralen Thema geworden. In diesem Artikel werden wir einige Funktionen der Xiaohongshu-Kontoverwaltungssoftware besprechen und untersuchen, wie Sie Ihr Xiaohongshu-Konto besser verwalten können. Da die sozialen Medien wachsen, müssen viele Menschen mehrere soziale Konten verwalten. Dies ist auch eine Herausforderung für Xiaohongshu-Benutzer. Einige Xiaohongshu-Kontoverwaltungssoftware kann Benutzern dabei helfen, mehrere Konten einfacher zu verwalten, einschließlich automatischer Inhaltsveröffentlichung, geplanter Veröffentlichung, Datenanalyse und anderen Funktionen. Mithilfe dieser Tools können Benutzer ihre Konten effizienter verwalten und die Bekanntheit und Aufmerksamkeit ihres Kontos erhöhen. Darüber hinaus verfügt Xiaohongshu über eine Kontoverwaltungssoftware
Was ist Discuz? Definition und Funktionseinführung von Discuz
Mar 03, 2024 am 10:33 AM
„Discuz erkunden: Definition, Funktionen und Codebeispiele“ Mit der rasanten Entwicklung des Internets sind Community-Foren zu einer wichtigen Plattform für Menschen geworden, um Informationen zu erhalten und Meinungen auszutauschen. Unter den vielen Community-Forumsystemen wird Discuz als bekannte Open-Source-Forumsoftware in China von der Mehrheit der Website-Entwickler und -Administratoren bevorzugt. Was ist Discuz? Welche Funktionen hat es und wie kann es unserer Website helfen? In diesem Artikel wird Discuz ausführlich vorgestellt und spezifische Codebeispiele beigefügt, damit die Leser mehr darüber erfahren können.
PHP-Tipps: Implementieren Sie schnell die Funktion „Zurück zur vorherigen Seite'.
Mar 09, 2024 am 08:21 AM
PHP-Tipps: Implementieren Sie schnell die Funktion zum Zurückkehren zur vorherigen Seite. Bei der Webentwicklung müssen wir häufig die Funktion zum Zurückkehren zur vorherigen Seite implementieren. Solche Vorgänge können das Benutzererlebnis verbessern und Benutzern die Navigation zwischen Webseiten erleichtern. In PHP können wir diese Funktion durch einfachen Code erreichen. In diesem Artikel wird erläutert, wie Sie die Funktion zum Zurückkehren zur vorherigen Seite schnell implementieren können, und es werden spezifische PHP-Codebeispiele bereitgestellt. In PHP können wir $_SERVER['HTTP_REFERER'] verwenden, um die URL der vorherigen Seite abzurufen
Ausführliche Erläuterung der Funktionen und Funktionen von GDM unter Linux
Mar 01, 2024 pm 04:18 PM
Detaillierte Erläuterung der Funktionen und Funktionen von GDM unter Linux Im Linux-Betriebssystem ist GDM (GNOMEDisplayManager) ein grafischer Anmeldemanager, der Benutzern eine Schnittstelle zum An- und Abmelden am System bietet. GDM ist normalerweise Teil der GNOME-Desktopumgebung, kann aber auch von anderen Desktopumgebungen verwendet werden. Die Rolle von GDM besteht nicht nur darin, eine Anmeldeschnittstelle bereitzustellen, sondern umfasst auch die Verwaltung von Benutzersitzungen, Bildschirmschoner, automatische Anmeldung und andere Funktionen. Die Funktionen von GDM umfassen hauptsächlich die folgenden Aspekte:
Wofür wird PHP verwendet? Entdecken Sie die Rolle und Funktionen von PHP
Mar 24, 2024 am 11:39 AM
PHP ist eine serverseitige Skriptsprache, die in der Webentwicklung weit verbreitet ist. Ihre Hauptfunktion besteht darin, dynamische Webinhalte zu generieren. In Kombination mit HTML können damit reichhaltige und farbenfrohe Webseiten erstellt werden. PHP ist leistungsstark und kann verschiedene Datenbankoperationen, Dateioperationen, Formularverarbeitung und andere Aufgaben ausführen und bietet leistungsstarke Interaktivität und Funktionalität für Websites. In den folgenden Artikeln werden wir die Rolle und Funktionen von PHP anhand detaillierter Codebeispiele näher untersuchen. Werfen wir zunächst einen Blick auf eine häufige Verwendung von PHP: dynamische Webseitengenerierung: P
