Detaillierte Erklärung zur Installation und Verwendung von Vue-Router

npm install --save vue-router

vue erstelle Projektname
#Vue fragt Sie, welche Konfiguration verwendet werden soll. Standardmäßig ([Vue 2] Babel, Eslint)
Standard (Vue 3 Vorschau) ([Vue 3] babel, eslint)
Manuelles Auswählen von Features 

#Bitte wählen Sie „Funktionen manuell auswählen“. Vue wird Sie fragen, welche Konfigurationen das aktuelle Projekt benötigt. Überprüfen Sie die für Ihr Projekt benötigten Funktionen: (Drücken Sie <Leertaste> zum Auswählen, <a> zum Umschalten auf alle, <i> zum Umkehren der Auswahl)

>(*) Vue-Version auswählen
(*) Babel
() TypoScript
( ) Progressive Web App (PWA) Unterstützung
( ) Router
( ) Vuex
( ) CSS-Präprozessoren
(*) Linter / Formatierer
( ) Komponententests
( ) E2E-Tests   
#Bitte wählen Sie Router aus und wählen Sie dann die folgende Reihe von Fragen entsprechend der tatsächlichen Situation aus.

// src/router/index.js

importiere Vue von 'vue' // Importiere Vue
importiere VueRouter von „vue-router“ // Importiere VueRouter

// Vue unterstützt VueRouter
Vue.use(VueRouter)

let router = new VueRouter() // VueRouter initialisieren

neuer Vue({  
  Router // Konfigurieren Sie das VueRouter-Instanzobjekt auf die Router-Option des Vue-Instanziierungskonfigurationsobjekts}).$mount('#app')

// src/main.js

Router aus „./router“ importieren

neuer Vue({
  Router,
  rendern: h => h(App)
}).$mount('#app')

to="/home" url="/home/user" nicht strikte Übereinstimmung to="/home" url="/home/user/10086" nicht strikte Übereinstimmung to="/home" url="/home" strikte Übereinstimmung to="/" url="/order" / ist die Stammroute aller Routen, daher handelt es sich um nicht strikte Übereinstimmungen

{
  Pfad: Zeichenfolge,
  Komponente?: Komponente, // Die Routenkomponente, die angezeigt wird, wenn die aktuelle Route mit Name? übereinstimmt: Zeichenfolge, // Umleitung der benannten Route?: Zeichenfolge | Standort | Funktion, // Eigenschaften der Routenumleitung?: Boolesch | Objekt | Funktion, // 
  Alias?: Zeichenfolge | Array<Zeichenfolge>, // Untergeordnete Routenaliase?: Array<RouteConfig>, // Verschachtelte Routen beforeEnter?: (an: Route, von: Route, weiter: Funktion) => void, // Routenschutz caseSensitive?: Boolesch, // Ist die Übereinstimmungsregel case-sensitiv? (Standardwert: false)
}

Vue von „vue“ importieren
VueRouter von „vue-router“ importieren
App aus „./App.vue“ importieren
Home aus „./views/Home“ importieren
Bestellung aus './views/Order' importieren
Benutzer aus „./views/User“ importieren

// Vue unterstützt VueRouter
Vue.use(VueRouter)

let router = neuer VueRouter({
  Routen: [
    {
      Pfad: '/home',
      Komponente: Startseite
    },
    {
      Pfad: '/order',
      Komponente: Bestellung
    },
    {
      Pfad: '/user',
      Komponente: Benutzer
    }
  ]
})

neuer Vue({
  rendern: h => h(App),
  Router
}).$mount('#app')       

// Navigieren Sie zur angegebenen URL
<router-link to="/home">Zuhause</router-link>
<router-link to="/order">Bestellung</router-link>
<router-link to="/user">Benutzer</router-link>
/* Zum angegebenen Ort navigieren
Allgemeine Eigenschaften des Standortobjekts im Vue-Router {
    Pfad: ‚/‘, //Geben Sie den Pfad der Sprungroute an. Hash: ‚#top‘ //Geben Sie den Hashwert der Sprungroute an. Name: ‚Home‘, //Geben Sie den Namenswert der benannten Route für den Sprung an. Parameter: {}, //Geben Sie das von der Sprungroute übergebene Parameterobjekt an. Abfrage: {} //Geben Sie das von der Sprungroute übergebene Schlüssel-Wert-Paar der Abfrage an. }
*/
<router-link :to="{path:'/user'}">Benutzer</router-link>
// Wenn zum Umleiten einer Seite der Standort verwendet wird, kann das Params-Attribut des aktuellen Standorts nicht an die Routing-Komponente <router-link :to="{path:'/user',hash:'#top',params:{id:1,name:'Xiao Ming'}}">user</router-link> übergeben werden.
// Mit der Namensroutennavigation können Sie Parameter an jede benannte Route übergeben
<router-link :to="{name:'Benutzer',hash:'#top',params:{id:1,name:'Xiao Ming'}}">Benutzer</router-link>
// Abfrage unterstützt Namensnavigation und Pfadnavigation. Es wird nicht empfohlen, Abfragen zum Übergeben von Objektattributen zu verwenden <router-link :to="{name:'User',hash:'#top',query:{id:1,name:'Xiao Ming'}}">user</router-link>

//Verwenden Sie den Ersatz, um zur Route <router-link class="tab-item" replace to="/user">user</router-link> zu springen.

// Wenn die aktuelle Browser-URL /order ist
// Durch Klicken auf „Gec“ gelangen Sie zu /order/gec
<router-link to="gec" append>Gec</router-link>
// Klicken Sie auf Gec1. Da das Ziel von Gec1 kein relativer Pfad ist, ist das Anhängen ungültig und die Route springt zu /gec
<router-link to="/gec" append>Gec1</router-link>
// Wenn Sie auf Gec2 klicken, ohne etwas anzuhängen, springen Sie zu /gec
<router-link to="gec">Gec2</router-link>

// Router-Link als Span-Element auf der Seite rendern <router-link tag="span" class="tab-item" to="/">Home</router-link>

// Der Klassenname des aktuellen Router-Links ist aaaa, wenn er nicht streng übereinstimmt
<router-link active-class="aaaa" to="/order">Bestellen</router-link>

//Sowohl Doppelklick als auch Klicken können den Routensprung des aktuellen Elements <router-link :event="['dblclick','click']" to="/">Homepage</router-link> auslösen.

<Übergangsname="Überblenden">
  <am Leben erhalten>
    <Router-Ansicht></Router-Ansicht>
  </am Leben erhalten>
</Übergang>