Verwenden Sie Vue-Router, um einfache Navigationsfunktionen auszuführen

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

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)

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>

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)
})

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;

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)
})

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>

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}
 ]
})

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:&#39;cart&#39;}">
   <p>购物车</p>
   </router-link>
  </li>
  <li>
   <router-link :to ="{name:&#39;me&#39;}">
   <p>个人中心</p>
   </router-link>
  </li>

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:&#39;cart&#39;}" tag="span">
   <p>购物车</p>
   </router-link>
  </li>

konfigurieren Ich hoffe, dass der gesamte Inhalt dieses Artikels für das Studium aller hilfreich ist. Weitere verwandte Informationen finden Sie auf der chinesischen PHP-Website für Inhalte!

Verwandte Empfehlungen:

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!