Πώς να δημιουργήσετε μια γραμμή πλοήγησης στο Vue.js

Τι να περιμένεις

Ένα εγχειρίδιο σχετικά με τον τρόπο δημιουργίας ενός στοιχείου γραμμής πλοήγησης χρησιμοποιώντας τον δρομολογητή Vue. Η γραμμή πλοήγησης θα έχει τέσσερις διαδρομές:

  1. Γειά σου Κόσμε
  2. Σπίτι
  3. Σχετικά με
  4. Επικοινωνία

Αυτές οι διαδρομές θα συμπληρώσουν τη γραμμή πλοήγησης χρησιμοποιώντας δεδομένα μέσα στο στοιχείο.

Τεχνολογία

Χρησιμοποίησα τρία βασικά κομμάτια για να δημιουργήσω αυτή τη γραμμή πλοήγησης.

  • Vue.js για να δημιουργήσετε ένα πρότυπο για το πώς ήθελα να λειτουργήσει η γραμμή πλοήγησης.
  • Vue-cli για να δημιουργήσετε το έργο vue.
  • Vue Router για πλοήγηση μεταξύ σελίδων

Αν θέλετε να δείτε το ολοκληρωμένο έργο, εδώ είναι το GitHub Repo.

1. Έναρξη του έργου

Εγκαταστήστε Vue-CLI αν δεν έχετε, μπορείτε να κάνετε κλικ εδώ για να μεταβείτε στη σελίδα οδηγιών εγκατάστασης. Μου αρέσει να χρησιμοποιώ NPM, έτσι ακολουθούσα τις οδηγίες του NPM. Δημιουργήστε ένα κενό φάκελο για να εργαστείτε και να το ανοίξετε στο τερματικό. Χρησιμοποιώ τον κώδικα VS, οπότε το ανοίγω και δουλεύω από το ενσωματωμένο τερματικό περίπου το 99% του χρόνου. Ακολουθούν οι εντολές για την εκκίνηση του έργου. Μετά από κάθε εντολή, πατήστε enter

Δημιουργήσαμε ένα έργο Vue με τον τίτλο front-end και εγκατεστημένο vue-router. Η δομή του φακέλου σας θα πρέπει να φαίνεται παρακάτω:

Πρέπει μόνο να ανησυχούμε για το τι υπάρχει στο φάκελο src για αυτό το σεμινάριο.

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

2. Δημιουργήστε τις τρεις σελίδες για να πλοηγηθείτε

Ας δημιουργήσουμε τις άλλες τρεις σελίδες για να πλοηγηθείτε μεταξύ. Η πρώτη σελίδα που θα δημιουργήσουμε είναι Αρχική σελίδα. Ας προσθέσουμε ένα νέο αρχείο .vue στο φάκελο components που ονομάζεται Home.vue. Παρακάτω είναι αυτό που θα περιέχει το στοιχείο ενός αρχείου.

Αφού προσθέσετε τον κώδικα, αποθηκεύστε αυτό το αρχείο και δείτε αν υπάρχουν σφάλματα στο τερματικό σας. Χρησιμοποιώντας το webpack και το Vue CLI, το έργο σας κατασκευάζεται κάθε φορά που αποθηκεύεται. Θα δείτε επίσης την ανανέωση του προγράμματος περιήγησης. Θα θελήσετε να αποθηκεύσετε αφού κάνετε κάθε στοιχείο.

Τώρα που ολοκληρώνεται το στοιχείο Home, ας προσθέσουμε το στοιχείο About. Δημιουργήστε ένα νέο αρχείο About.vue στο φάκελο των στοιχείων και προσθέστε τον παρακάτω κώδικα.

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

Έχουν προστεθεί και τα τρία στοιχεία. Εδώ είναι ο σύνδεσμος για τη δέσμευση αυτών των τριών στοιχείων στο GitHub.

3. Ενημερώστε τον δρομολογητή / index.js

Τώρα που έχουμε όλα τα απαραίτητα στοιχεία, ας προσθέσουμε διαδρομές στα τρία νέα στοιχεία.

Ανοίξτε το δρομολογητή / index.js. Σε αυτό το σημείο δηλώνονται όλες οι διαδρομές. Από τη στιγμή που εγκαταστάθηκε με το πρότυπο webpack, το index.js περιέχει μια διαδρομή για το στοιχείο HelloWorld.

Πρώτα, εισάγετε το στοιχείο Home. Για να το κάνετε αυτό, προσθέστε την αρχική εισαγωγή από το '@ / components / Home σε μια νέα γραμμή κάτω από τις εισαγωγές σας.

Το αρχείο σας θα πρέπει τώρα να φαίνεται ως εξής:

Το επόμενο βήμα είναι να προσθέσετε την Αρχική διαδρομή για να μπορέσετε να πλοηγηθείτε. Για να το κάνετε αυτό, προσθέστε ένα αντικείμενο στη συστοιχία που εξάγεται. Εδώ είναι το αντικείμενο για να προσθέσετε:

{
  διαδρομή: '/ home',
  όνομα: 'Αρχική σελίδα',
  συστατικό: Αρχική σελίδα
}}

Εδώ είναι τι θα πρέπει να δείξει το index.js μετά την προσθήκη μιας διαδρομής στο στοιχείο Home:

Για να ελέγξετε ότι η διαδρομή αυτή λειτούργησε, μεταβείτε στη διεύθυνση http: // localhost: 8080 / # / home Τώρα, εισάγετε τα άλλα δύο στοιχεία και προσθέστε τις διαδρομές τους. Το αρχείο σας θα πρέπει να μοιάζει με αυτό όταν τελειώσετε:

Όλες οι διαδρομές έχουν δημιουργηθεί. Αν θέλετε να δοκιμάσετε τη διαδρομή, αλλάξτε το / home στο / path που θέλετε να δοκιμάσετε στη γραμμή διευθύνσεών σας. Ακολουθεί ένας σύνδεσμος δέσμευσης για να δείτε τι προστέθηκε σε αυτό το βήμα.

4. Δημιουργήστε το στοιχείο πλοήγησης και εμφανίστε το

Θα δημιουργήσουμε ένα ακόμα συστατικό στοιχείο, το πραγματικό στοιχείο πλοήγησης. Αυτό το στοιχείο θα καταστήσει τους συνδέσμους πλοήγησης. Δημιουργήστε ένα αρχείο Nav.vue στο φάκελο στοιχείων. Ας προσθέσουμε ένα μέρος για να πλοηγηθείτε σε αυτήν τη στιγμή. Αυτό δεν θα βασίζεται στα δεδομένα και θα δίνεται στο πρότυπο. Στην ενότητα προτύπου του αρχείου vue, προσθέστε τα εξής:

  

Γραμμή πλοήγησης   

Ο είναι συγκεκριμένος για το Vue Router. Όταν χρησιμοποιείτε το Vue-Router, δεν χρειάζεται να χρησιμοποιήσετε το για να συνδεθείτε σε άλλη σελίδα. to = "" είναι ποια διαδρομή πρόκειται να συνδέσετε.

Το αρχείο σας Navigation.vue θα πρέπει να φαίνεται ως εξής:

Τώρα που ο σύνδεσμος πλοήγησης είναι έτοιμος και στη θέση του, ας προσθέσουμε αυτό το στοιχείο σε όλες τις σελίδες. Για να γίνει αυτό, πρέπει να εισαγάγουμε το στοιχείο στο App.vue και να το εμφανίσουμε.

Για να γίνει αυτό, προσθέστε την Πλοήγηση εισαγωγής από το "./components/Navigation" στην ενότητα δέσμης ενεργειών. Κατά την εξαγωγή του σεναρίου, προσθέστε αυτό το αντικείμενο αντικειμένων μετά το όνομα:

συστατικά: {
  'Πλοήγηση': Πλοήγηση
}}

Τώρα το στοιχείο έχει εισαχθεί και είναι έτοιμο για χρήση στο App.vue. Στην ενότητα προτύπου, προσθέστε μέσα στις ετικέτες

. Το αρχείο App.vue θα πρέπει να φαίνεται ως εξής:

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

Εδώ είναι ο δεσμός δέσμευσης των αλλαγών που έχουν αλλάξει μέχρι τώρα.

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

Ανοίξτε το Navigation.vue Στο αντικείμενο εξαγωγής, πρέπει να προσθέσετε τα δεδομένα που λαμβάνει το στοιχείο. Προσθέστε τα εξής μετά το όνομα: 'Πλοήγηση':

δεδομένα () {
  ΕΠΙΣΤΡΟΦΗ {
    συνδέσεις: [
      {
         id: 0,
         κείμενο: «Hello World»,
         σελίδα: '/ HelloWorld'
      }}
    ]
  }}
}}

Η συστοιχία συνδέσμων διατηρεί αντικείμενα που καθορίζουν το αναγνωριστικό, το κείμενο που θα εμφανίζεται και τη διαδρομή προς την οποία θα μεταβείτε.

Στην ενότητα προτύπου, πρόκειται να προσαρμόσουμε το για να είναι αυτό:

 

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

Συνδέει το χαρακτηριστικό που αποδίδεται στην αναφερόμενη σελίδα.

Αποθηκεύστε το αρχείο και δείτε στο πρόγραμμα περιήγησης ότι η πλοήγησή σας τώρα έχει Hello World ως σύνδεσμο για κλικ.

Το Navigation.vue θα πρέπει να φαίνεται ως εξής:

Τώρα, προσθέστε τα υπόλοιπα μονοπάτια. Αφού προστεθούν και τα τέσσερα μονοπάτια, το Navigation.vue πρέπει να είναι αυτό:

Το κείμενο είναι το ένα δίπλα στο άλλο, οπότε ας προσθέσουμε κάποιο στυλ σε αυτό το πρότυπο για να διαχωρίσουμε τους συνδέσμους. Προσθέστε class = "spacing" σε Below , προσθέστε τα εξής: