Vue [sieben] einfache Verwendung des Routings vue-router
Artikelverzeichnis
Vorwort
Routing ist die entsprechende Regel zwischen dem Hash-Wert (#hash) in der Browser-URL (Uniform Resource Locator) und der Display-View-Komponente. Bei Web-Apps gibt es oft die Funktion, die gesamte Anwendung über eine Seite anzuzeigen und zu verwalten. SPA ist oft eine Anwendung mit komplexen Funktionen. Um alle Ansichtsinhalte effektiv zu verwalten, wurde ein Frontend-Routing entwickelt. Der Vorteil ist, dass das Wechseln zwischen Routen die Seite nicht erneut aktualisiert, aber das anfängliche Laden langsam ist.
1. Routing - Klassifizierung von Komponenten
Es gibt zwei Arten von .vue-Dateien:
- Seitenkomponenten
- Wiederverwendbare Komponenten
Es gibt im Wesentlichen keinen Unterschied zwischen den beiden Typen, aber es ist üblich, Seitenkomponenten in den Ordner src/views und wiederverwendbare Komponenten in den Ordner src/components zu legen.
Seitenkomponenten: Die Seitenanzeige wird in Verbindung mit dem Routing verwendet.
Wiederverwendbare Komponenten: Anzeigedaten, die häufig zur Wiederverwendung verwendet werden.
Zusammenfassung: Seitenkomponenten unter Ansichten, kombiniert mit Routing-Switching, werden im Allgemeinen in vue unter Ansichten importiert, um Anzeigedaten wiederzuverwenden.
Zweitens, Vue-Router-Vorbereitung
Erstellen Sie in den Ansichten Your.vue, My.vue, It.vuedrei Komponenten:
Ihre.vue-Komponenten sind wie folgt:
<template>
<div>
// My组件为My，It组件为It
Your组件
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
Fügen Sie der App.vue-Komponente Folgendes hinzu:
<template>
<div>
<div class="footer_wrap">
<a href="#/your">你的</a>
<a href="#/my">我的</a>
<a href="#/it">他的</a>
</div>
<div class="top">
</div>
</div>
</template>
<script>
export default {
};
</script>
<style scoped>
.footer_wrap {
position: fixed;
left: 0;
top: 0;
display: flex;
width: 100%;
text-align: center;
background-color: #333;
color: #ccc;
}
.footer_wrap a {
flex: 1;
text-decoration: none;
padding: 20px 0;
line-height: 20px;
background-color: #333;
color: #ccc;
border: 1px solid black;
}
.footer_wrap a:hover {
background-color: #555;
}
.top {
padding-top: 62px;
}
</style>
3. Nutzung des vue-Routers
- vue-router installieren
npm i [email protected]
Die Version von vue2 muss die Version der Route angeben. Wenn die Version zu hoch ist, wird ein Fehler gemeldet. Derzeit entspricht die neueste Routenversion vue3.
- einführen
main.js_
import VueRouter from 'vue-router'
main.jsVerwenden Sie das Routing-Plugin in
Vue.use(VueRouter)
Tipps: Um Plugins in vue zu verwenden, müssen Sie Vue.use() aufrufen.
main.jsErstellen Sie ein Routenobjekt in
const router = new VueRouter({
})
main.jsmontieren Sie den Render in
new Vue({
router,
render: h => h(App),
}).$mount('#app')
Nachdem die Konfiguration abgeschlossen ist, wird # zur Adressleiste hinzugefügt, wie in der folgenden Abbildung gezeigt:
4. Konfigurieren Sie Routing-Regeln
Routing-Regeln im Routing-Objekt konfigurieren:
Wir haben drei Komponenten und konfigurieren drei Routing-Regeln.
const router = new VueRouter({
routes: [{
path: '/your', //路由地址
name:'your' //路由名字，可以不写
component: Your //在这个地址下路由跳转的组件
},
{
path: '/my',
component: My
},
{
path: '/it',
component: It
}
]
})
== Nach der Konfiguration der Routing-Regeln müssen Sie auch den Routing-Exit konfigurieren, was für Anfänger leicht zu vergessen ist ==
Lassen Sie uns den Exit in App.vue konfigurieren:
<template>
<div>
<div class="footer_wrap">
<a href="#/your">你的</a>
<a href="#/my">我的</a>
<a href="#/it">他的</a>
</div>
<div class="top">
+ <router-view></router-view>
</div>
</div>
</template>
An dieser Stelle sieht das Effektdiagramm wie folgt aus:
So weit: Die einfache Verwendung von Routing ist abgeschlossen.
Zusammenfassen
Dieser Artikel stellt hauptsächlich kurz die grundlegende Verwendung von vue-router dar. Andere Verwendungen von Routing, wie etwa: Routing-Kapselung, deklarative Navigation und programmgesteuerte Navigation, werden in den Folgeartikeln des Bloggers erläutert. (Folgen Sie Bloggern und verirren Sie sich nicht)