So implementieren Sie Seitensprünge in einem Vue-Projekt

Problembeschreibung:

vue-router ist ein Modul, das zum Implementieren von Routing-Seitensprüngen in der Front-End-Entwicklung verwendet wird. Nachfolgend zeigt Ihnen der Editor, wie Sie Seitensprünge basierend auf dem bereits erstellten Vue-Router-Projekt implementieren.

Versuchsergebnisse und Diskussion:

1. Erstellen Sie ein Vue-CLI-Standardprojekt (das nur Babel enthält)

2. Geben Sie die Erstellungsdatei ein

Geben Sie den erstellten Dateipfad als Administrator ein und führen Sie den Befehl npm install vue-router –save aus.

(Wenn das Taobao-Image installiert wurde, führen Sie cnpm install vue-router-save aus.)

3. Überprüfen Sie die Konfiguration

In package.json können Sie überprüfen, ob vue-router erfolgreich konfiguriert wurde.

4. Erstellen Sie einen Ansichtenordner

Erstellen Sie einen neuen Ansichtenordner und erstellen Sie in diesem Ordner zwei Komponenten, home.vue und about.vue

5. APP.vue einrichten

Gehen Sie wie folgt vor:

<Vorlage>

<div id="app">

<div id="nav">

<router-link zu="/">Zuhause</router-link> |

<router-link to="/about">über</router-link>

</div>

<Router-Ansicht/>

</div>

</Vorlage>

<Stil>

#app {

Textausrichtung: zentriert;

Rand oben: 60px;

}

</Stil>

6. Konfigurieren Sie main.js

Vue von „vue“ importieren

Router von „vue-router“ importieren

Home aus „./views/Home.vue“ importieren

Vue.use(Router)

exportiere standardmäßig einen neuen Router({

Modus: "Verlauf",

Basis: Prozess.Umgebung.BASE_URL,

Routen: [

{

Weg: '/',

Name: 'Heimat',

Komponente: Startseite

},

{

Pfad: '/about',

Name: "Über",

Komponente: () => import( './views/About.vue')

}

]

})

7. Operationsergebnisse

wie folgt:

Zusammenfassung des Problems:

In diesem Experiment wird vue-router in der cmd Eingabeaufforderung installiert und router.js wird so konfiguriert, dass die Seitensprungfunktion implementiert wird. Obwohl eine einfache Seitensprungfunktion erfolgreich implementiert wurde, wurde die Definition von Routen und Komponenten in router.js nicht klar erklärt. Die Seitensprungfunktion wird später untersucht.

Dies ist das Ende dieses Artikels zur Implementierung von Seitensprüngen in Vue-Projekten. Weitere relevante Inhalte zur Implementierung von Seitensprüngen in Vue-Projekten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!