Dieser Artikel stellt hauptsächlich die Verwendung von Vue-Router zur Vervollständigung einfacher Navigationsfunktionen vor. Er hat einen gewissen Referenzwert. Jetzt können Freunde in Not darauf verweisen.
Vue-Router ist Vue . Eine Reihe dedizierter Routing-Tool-Bibliotheken, die offiziell von js bereitgestellt werden. In diesem Artikel wird hauptsächlich die Verwendung von Vue-Router zur Vervollständigung einfacher Navigationsfunktionen vorgestellt.
vue-router ist eine dedizierte Routing-Tool-Bibliothek, die offiziell von Vue.js bereitgestellt wird
Der Installationsbefehl lautet wie folgt:
npm i vue-router -D
Nach dem Login kopieren
Die vue-router-Instanz ist ein Vue-Plug-in. Wir müssen es über Vue.use mit Vue verbinden. ) in der globalen Vue-Referenz.
In unserem Projekt ist main.js die Standard-Programmeintragsdatei, und alle globalen Konfigurationen werden in dieser Datei durchgeführt.
Wir fügen den folgenden Verweis auf main.js hinzu
import VueRouter from 'vue-router'
Vue.use(VueRouter)
Nach dem Login kopieren
Damit ist die grundlegendste Installationsarbeit von vue-router abgeschlossen.
Die Funktionen, die wir als nächstes implementieren wollen, werden wie folgt beschrieben
Auf der Startseite gibt es zwei Links: Warenkorb und persönliches Center
Klicken Sie auf verschiedene Links, um Unterschiedlichen Inhalt anzeigen
Zuerst erstellen wir zwei Komponentendateien im src-Verzeichnis: Cart.vue Me.vue
Der Inhalt der beiden neu erstellten Komponentendateien hat für die die gleiche Struktur vorerst.
<template>
<!-- 这个p里面的内容可设置不同以区分 -->
<p>购物车</p>
</template>
<script>
export default {}
</script>
<style lang="scss"></style>Nach dem Login kopieren
Der nächste Schritt besteht darin, die Übereinstimmungsregeln zwischen Routing und diesen Komponenten in der Datei main.js zu definieren.
Die Definition von VueRouter ist sehr einfach: Erstellen Sie eine VueRouter-Instanz und geben Sie den Routing-Pfad zu einem Komponententyp an
Wie im folgenden Code (main.js) gezeigt
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
//引入创建的两个组件
import Cart from './Cart.vue'
import Me from './Me.vue'
//使用路由实例插件
Vue.use(VueRouter)
const router = new VueRouter({
mode:'history',
base: '__dirname',
routes:[
//将页面组件与path指令的路由关联
{path:'/cart',component:Cart},
{path:'/me',component:Me}
]
})
new Vue({
el: '#app',
//将路由实例添加到Vue实例中去
router,
render: h => h(App)
})Nach dem Login kopieren
Wir können den oben genannten Routing-bezogenen Code extrahieren und in eine andere Datei „routes.js“ einfügen, um zu verhindern, dass der Inhalt der Datei „main.js“ länger wird.
Erstellen Sie einen neuen Konfigurationsordner und fügen Sie die Datei „routes.js“ hinzu.
Dann lautet der Routen.js-Code wie folgt
import Vue from 'vue'
import VueRouter from 'vue-router'
//引入创建的两个组件
import Cart from '../Cart.vue'
import Me from '../Me.vue'
//使用路由实例插件
Vue.use(VueRouter)
const router = new VueRouter({
mode:'history',
base: '__dirname',
routes:[
//将页面组件与path指令的路由关联
{path:'/cart',component:Cart},
{path:'/me',component:Me}
]
})
export default router;Nach dem Login kopieren
Dann wird der Code der Datei main.js wie folgt reduziert:
import Vue from 'vue'
import App from './App.vue'
import router from './config/routes'
new Vue({
el: '#app',
//将路由实例添加到Vue实例中去
router,
render: h => h(App)
})Nach dem Login kopieren
vue-router bietet zwei Anweisungs-Tags
: die Ansichtskomponente, die dem Rendering-Pfad entspricht
: Unterstützt Benutzer beim Navigieren in Anwendungen mit Routing-Funktionen
Mit den beiden oben genannten Befehls-Tags können wir den entsprechenden Code in den Programmeingang App.vue schreiben:
<template>
<p id="app">
<p class="tabs">
<ul>
<li>
<router-link to ="/cart">
<p>购物车</p>
</router-link>
</li>
<li>
<router-link to ="/me">
<p>个人中心</p>
</router-link>
</li>
</ul>
</p>
<p class="content">
<!-- 使用 router-view 渲染视图 -->
<router-view></router-view>
</p>
</p>
</template>
<script>
export default {
name: "app"
};
</script>
<style lang="scss"></style>Nach dem Login kopieren
Der obige Code hat die erwartete Funktion erreicht.
Dann sehen wir, dass der Pfad in „/cart“ tatsächlich in {path:'/cart',component:Cart} definiert wurde. Wenn er geändert werden muss, muss er an beiden Stellen gleichzeitig geändert werden (falls vorhanden). wird an anderer Stelle verwendet, es Weitere Änderungen)
Dann wäre es nicht toll, einfach den Pfad in {path:'/cart',component:Cart} herauszunehmen.
Zu diesem Zeitpunkt stellt unser Vue-Router eine implizite Routenreferenzmethode bereit, die als „benannte Route“ bezeichnet wird.
Einfach ausgedrückt ersetzt sie URL< durch die Namensreferenz der Route 🎜>
Daher wird der Konfigurationscode von VueRouter wie folgt geändert:
const router = new VueRouter({
mode:'history',
base: '__dirname',
routes:[
//将页面组件与path指令的路由关联
{name:'cart',path:'/cart',component:Cart},
{name:'me',path:'/me',component:Me}
]
})Nach dem Login kopieren
Auf diese Weise verwenden wir v-bind, um das to-Attribut von
zu binden zu Vue Im Beispiel wird die URL direkt über den Namen <router-link >
erhalten, daher wird der Code des Linkteils in App.vue wie folgt geändert:
<li>
<router-link :to ="{name:'cart'}">
<p>购物车</p>
</router-link>
</li>
<li>
<router-link :to ="{name:'me'}">
<p>个人中心</p>
</router-link>
</li>Nach dem Login kopieren
Verwenden Sie bisher den Vue-Router, um die einfache Navigationsfunktion zu vervollständigen.
Anweisungen
wird in ein -Tag gerendert Standardmäßig können Sie Tags generieren, indem Sie das Tag-Attribut wie
<li>
<router-link :to ="{name:'cart'}" tag="span">
<p>购物车</p>
</router-link>
</li>Nach dem Login kopieren
Informationen zur Formularelementüberprüfungsmethode in der V-for-Schleife, wenn Vue die Elementkomponente verwendet
Vue setzt die Idee um, die Anzahl der Eingabezeilen im Textbereich festzulegen und einen Unterstreichungsstil hinzuzufügen
Das obige ist der detaillierte Inhalt vonVerwenden Sie Vue-Router, um einfache Navigationsfunktionen auszuführen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
