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 🎜>

const router = new VueRouter({
 mode:'history',
 base: '__dirname',
 routes:[
 //将页面组件与path指令的路由关联
 {name:'cart',path:'/cart',component:Cart},
 {name:'me',path:'/me',component:Me}
 ]
})

zu binden zu Vue Im Beispiel wird die URL direkt über den Namen <router-link >

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

  <li>
   <router-link :to ="{name:&#39;cart&#39;}" tag="span">
   <p>购物车</p>
   </router-link>
  </li>