Πώς να χειριστείτε τη δρομολόγηση στο Vue με το Vue Router

Το Vue Router, ο επίσημος δρομολογητής για το Vue, καθιστά δυνατή τη δημιουργία Εφαρμογών Μονής Σελίδας (SPA) στο Vue. Το Vue Router σάς επιτρέπει να αντιστοιχίσετε τα στοιχεία της εφαρμογής Ιστού σας σε διαφορετικές διαδρομές του προγράμματος περιήγησης, να διαχειριστείτε τη στοίβα ιστορικού της εφαρμογής σας και να ρυθμίσετε προηγμένες επιλογές δρομολόγησης.

Ξεκινώντας με τον δρομολογητή Vue

Για να ξεκινήσετε με το Vue Router, εκτελέστε τα εξής npm (Node Package Manager) εντολή στον κατάλογο που προτιμάτε για τη δημιουργία της εφαρμογής Vue:

npm create vue 

Όταν σας ζητηθεί να προσθέσετε το Vue Router για Εφαρμογή Ενιαίας Σελίδας ανάπτυξη, επιλέξτε Ναί.

Στη συνέχεια, ανοίξτε το έργο σας στο πρόγραμμα επεξεργασίας κειμένου που προτιμάτε. της εφαρμογής σας src κατάλογος πρέπει να περιλαμβάνει α δρομολογητή ντοσιέ.

ο δρομολογητή φάκελος σπίτια an index.js αρχείο που περιέχει τον κώδικα JavaScript για το χειρισμό διαδρομών στην εφαρμογή σας. ο

index.js Το αρχείο εισάγει δύο λειτουργίες από το vue-router πακέτο: δημιουργία δρομολογητή και δημιουργία Ιστορικού Ιστού.

ο δημιουργία δρομολογητή η λειτουργία δημιουργεί μια νέα διαμόρφωση διαδρομής από ένα αντικείμενο. Αυτό το αντικείμενο περιέχει το ιστορία και διαδρομές κλειδιά και τις αξίες τους. ο διαδρομές κλειδί είναι μια σειρά αντικειμένων που περιγράφει λεπτομερώς τη διαμόρφωση κάθε διαδρομής, όπως φαίνεται στην παραπάνω εικόνα.

Αφού διαμορφώσετε τις διαδρομές σας, πρέπει να το εξαγάγετε δρομολογητή παράδειγμα και εισαγάγετε αυτό το παράδειγμα στο main.js αρχείο:

import'./assets/main.css'
import { createApp } from'vue'
import App from'./App.vue'
import router from'./router'
const app = createApp(App)
app.use(router)
app.mount('#app')

Εισαγάγατε το δρομολογητή λειτουργούν στο main.js αρχείο και στη συνέχεια έκανε την εφαρμογή Vue να χρησιμοποιήσει αυτήν τη λειτουργία δρομολογητή με το χρήση μέθοδος.

Στη συνέχεια, μπορείτε να εφαρμόσετε τις διαδρομές σας στην εφαρμογή Vue, δομώντας ένα παρόμοιο μπλοκ κώδικα με αυτό που ακολουθεί: