Οδηγός για το Vue Router

Εισαγωγή

Κατά την ανάπτυξη εφαρμογών ιστού με το Vue.js, εκτός εάν δημιουργείτε ένα Εφαρμογή μιας σελίδας (SPA), θα θέλετε να συνδέσετε πολλές σελίδες σε μια σελίδα προορισμού για να επιτρέψετε στους χρήστες να πλοηγηθούν σε αυτές. Αυτό είναι γνωστό ως δρομολόγηση.

Η δρομολόγηση είναι η διαδικασία με την οποία ένας χρήστης πλοηγείται σε διαφορετικές σελίδες ενός ιστότοπου. Το Vue.js είναι ένα πλαίσιο JavaScript που χρησιμοποιείται για τη δημιουργία Εφαρμογών μίας σελίδας, πράγμα που σημαίνει ότι αυτή η εφαρμογή φορτώνεται μόνο μία φορά από τον διακομιστή στο πρόγραμμα περιήγησης και το πρόγραμμα περιήγησης δεν χρειάζεται να φορτώσει ξανά κατά τη δρομολόγηση. Αντίθετα, απλώς ζητά αυτές τις σελίδες και φορτώνονται.

Σε αυτόν τον οδηγό, θα μάθουμε πώς να κάνουμε δρομολόγηση με το Vue.js και θα κάνουμε μια βαθιά βουτιά στους διάφορους τύπους δρομολόγησης που μπορούν να γίνουν και πώς μπορούν να γίνουν.

Ξεκινώντας

Η δρομολόγηση στο Vue.js γίνεται με Δρομολογητής Vue, το οποίο λειτουργεί παράλληλα με τη βασική βιβλιοθήκη Vue για να μας επιτρέψει να δημιουργήσουμε ένα σύστημα δρομολόγησης. Θα θέλαμε να χρησιμοποιήσουμε vue-router σε δύο σενάρια στο έργο μας. Θέλουμε είτε να χρησιμοποιήσουμε τον δρομολογητή σε ένα υπάρχον έργο είτε να τον προσθέσουμε κατά τη δημιουργία ενός νέου έργου.

Ρύθμιση του δρομολογητή Vue σε υπάρχον έργο

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

! npm install vue-router@4

Μόλις εγκατασταθεί, μεταβείτε στο src φάκελο και δημιουργήστε ένα φάκελο που ονομάζεται router, ακολουθούμενο από ένα αρχείο που ονομάζεται index.js στο router φάκελο, ο οποίος θα χρησιμεύσει ως αρχείο διαμόρφωσης του δρομολογητή μας. Μας src Ο κατάλογος θα μοιάζει τώρα με αυτό:

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

import { createRouter, createWebHashHistory } from 'vue-router'
import HomePage from '../views/HomePage.vue' const routes = [ { path: '/', name: 'home', component: HomePage },
] const router = createRouter({ history: createWebHashHistory(), routes
})
export default router

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

Καθένα από αυτά routes αντικείμενα αποτελείται συνήθως από το path, που είναι η διαδρομή url σε σχέση με τη ρίζα του ιστότοπου, το name, που χρησιμεύει ως αναγνωριστικό, και το component, το οποίο εισαγάγαμε στο επάνω μέρος της σελίδας.

Εκτός από τη συστοιχία διαδρομής, ρυθμίσαμε το στιγμιότυπο του δρομολογητή στο κάτω μέρος δημιουργώντας ένα createRouter() λειτουργία και περνώντας στο history βασικές αξίες και το routes πίνακα, και στη συνέχεια εξάγουμε το router παράδειγμα για χρήση στην εφαρμογή μας.

Για να χρησιμοποιήσετε αυτήν τη διαμόρφωση δρομολογητή στην εφαρμογή μας, ανοίξτε το main.js αρχείο στο src ντοσιέ, import router from "./router"και, στη συνέχεια, προσθέστε .use(router) μεταξύ createApp(App) και .mount('#app') όπως ακριβώς είναι παρακάτω:

import router from './router' createApp(App).use(router).mount('#app')

Αυτός ο διαλογισμός στα vue-router έχει διαμορφωθεί καθολικά στην εφαρμογή μας και το επόμενο βήμα είναι να το χρησιμοποιήσουμε στην εφαρμογή μας. Αυτό επιτυγχάνεται εύκολα με τη συμπερίληψη <router-view /> μέσα στο App.js ετικέτα προτύπου, η οποία αποδίδει μόνο την αντιστοιχισμένη διαδρομή:

<!--App.vue -->
<template>
<!-- Any code placed here is going to be fixed -->
<!-- This will only show the page that matches the selected route --> <router-view /> <!-- Any code placed here is going to be fixed -->
</template> <script> export default { name: 'App', }
</script>

Ρύθμιση διαδρομών στο Vue.js

Οι διαδρομές δημιουργούνται συνήθως στο router/index.js συστοιχία διαδρομών του αρχείου και αυτές οι διαδρομές συνδέονται με στοιχεία. Είναι καλή πρακτική να δημιουργείτε έναν φάκελο προβολών όπου θα αποθηκεύονται όλες οι προβολές σελίδας. Για παράδειγμα:

Σε αυτό το σημείο γνωρίζουμε πλέον πώς να ρυθμίζουμε τις διαδρομές με μη αυτόματο τρόπο.

Εγκαταστήστε το Vue Router με το Vue CLI

Αν πρόκειται να δημιουργήσουμε ένα νέο έργο και πιστεύουμε ότι θα το αξιοποιήσουμε vue-router, είναι πιο εύκολο να το κάνετε κατά τη δημιουργία του έργου.

Το μόνο που έχουμε να κάνουμε είναι να χρησιμοποιήσουμε το Vue CLI για να εγκαταστήσουμε την πιο πρόσφατη έκδοση του vue-router ενώ επιλέγουμε μη αυτόματα χαρακτηριστικά στη διαδικασία δημιουργίας του έργου μας:

Διαβάστε και μάθετε περισσότερα σχετικά με τη δημιουργία του έργου Vue.js μέσω μας Οδηγός για το Vue CLI!

Lazy Loading Routes With Vue Router

Καθώς η εφαρμογή μας μεγαλώνει σε μέγεθος, το μέγεθος του πακέτου μεγαλώνει, με αποτέλεσμα ο ιστότοπός μας να καθυστερεί να φορτώσει. Μπορούμε να χρησιμοποιήσουμε vue-router για να εφαρμόσετε lazy loading για να αποφύγετε τη φόρτωση ορισμένων συγκεκριμένων διαδρομών μέχρι να τις ζητήσει συγκεκριμένα ο χρήστης.

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

import { createRouter, createWebHashHistory } from 'vue-router';
const routes = [ { path: '/', name: 'home', component: () => import(/* webpackChunkName: "home" */ '../views/HomePage.vue'), }, { path: '/about', name: 'about', component: () => import(/* webpackChunkName: "about" */ '../views/AboutPage.vue'), },
];
const router = createRouter({ history: createWebHashHistory(), routes,
});
export default router;

Πλοήγηση μεταξύ διαδρομών με

Μέχρι στιγμής, μπορούσαμε να δημιουργήσουμε διαδρομές, αλλά πώς πλοηγούμαστε στην εφαρμογή μας; Χρησιμοποιούμε το <router-link> ετικέτα αντί για το <a> στοιχείο σε HTML για το χειρισμό της δρομολόγησης.

Για παράδειγμα, εάν θέλουμε να δημιουργήσουμε μια γραμμή πλοήγησης στο επάνω μέρος της εφαρμογής μας, θα μπορούσαμε να το κάνουμε αυτό στο App.js αρχείο πάνω από το <router-view/> ετικέτα ώστε να εμφανίζεται σε όλες τις διαδρομές:

<nav> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link>
</nav>

Ο σύνδεσμος δρομολογητή δέχεται το to='path' χαρακτηριστικό που οδηγεί τον χρήστη στη διαδρομή του στοιχείου όπως έχει οριστεί κατά τη διαμόρφωση της διαδρομής. Αυτό λειτουργεί όπως το href='path``' χαρακτηριστικό σε HTML.

Χρησιμοποιώντας επώνυμες διαδρομές

Η χρήση ονομασμένων διαδρομών μας επιτρέπει να περάσουμε στο name κλειδί που έχει πρόσβαση στο name ιδιότητα που ορίσαμε κατά τη διαμόρφωση των διαδρομών αντί να χρησιμοποιήσουμε τη διαδρομή δεσμεύοντας τα δεδομένα ως εξής:

<router-link :to="{ name: 'About' }">About</router-link>

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

Δυναμική Δρομολόγηση

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

Θα είχαμε δύο σελίδες – μία για την προβολή των φρούτων σε μια λίστα και μία για την εμφάνιση των λεπτομερειών κάθε φρούτου, η οποία είναι μια σελίδα «σχεδίου» που συμπληρώνεται με τα στοιχεία των φρούτων. Θα δημιουργήσουμε τις σελίδες στο φάκελο Vue και στη συνέχεια θα προσθέσουμε τις διαδρομές στο routes πίνακας:

import FruitsPage from '../views/FruitsPage.vue';
import FruitDetails from '../views/FruitDetails.vue'; const routes = [ { path: '/fruits', name: 'Fruits', component: FruitsPage, }, { path: '/fruits/:id', name: 'FruitDetails', component: FruitDetails, },
];

Θα παρατηρήσουμε ότι για την FruitDetails σελίδα, προσθέσαμε μια δυναμική id ιδιοκτησίας έτσι παίρνει το id παράμετρο και τη χρησιμοποιεί για να ρωτήσει τα συγκεκριμένα δεδομένα που εμφανίζονται σε αυτήν τη σελίδα χρησιμοποιώντας $route.params στο πρότυπό μας, κάνοντας έτσι τη διαδρομή δυναμική.

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

<!-- FruitsPage.vue --> <template> <h1>Fruits page</h1> <div :key="fruit.id" v-for="fruit in fruits"> // dynamic linking by attaching the id as params <router-link :to="{ name: 'FruitDetails', params: { id: fruit.id } }"> <h3>{{ fruit.name }}</h3> </router-link> </div>
</template> <script> export default { data() { return { fruits: [ { id: 1, name: 'Apple', description: "Apples are an incredibly nutritious fruit.", }, { id: 2, name: 'Mango', description: 'A mango is an edible stone fruit produced by the tropical.', }, { id: 3, name: 'Banana', description: 'A banana is an elongated, edible fruit of the genus Musa.', }, ], }; }, };
</script>

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

Πρόσβαση στις Παραμέτρους διαδρομής

Μέχρι στιγμής έχουμε δει πώς να μεταβιβάζουμε παραμέτρους σε μια συγκεκριμένη σελίδα δυναμικά, ας δούμε τώρα πώς μπορούμε να έχουμε πρόσβαση σε αυτήν την παράμετρο στο FruitDetails σελίδα. Υπάρχουν δύο τρόποι με τους οποίους μπορούμε να έχουμε πρόσβαση σε παραμέτρους στο Vue – μέσω $route.params ή χρησιμοποιώντας στηρίγματα:

Χρησιμοποιώντας $route.params

Οι παράμετροι είναι άμεσα προσβάσιμες μέσω $route.params:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ $route.params.id }}</p>
</template>

Ή μπορούμε να το έχουμε πρόσβαση στο δικό μας data() χρήση μεθόδου this:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p>
</template> <script> export default { data() { return { id: this.$route.params.id, }; }, };
</script>

Χρήση Vue Props

Μια άλλη εύκολη μέθοδος για δυναμική πρόσβαση στα δεδομένα μέσω διαδρομών είναι η χρήση υποστηριγμάτων. Πρώτα πρέπει να ρυθμίσουμε props προς την true στο αντικείμενο διαμόρφωσης διαδρομών:

{ path: '/fruits/:id', name: 'FruitDetails', component: FruitDetails, props: true,
},

Με αυτόν τον τρόπο, το μόνο που έχουμε να κάνουμε στη συνέχεια είναι να προσθέσουμε props επιλογή στο script επισημάνετε και στη συνέχεια χρησιμοποιήστε τα στηρίγματα μέσα μας template ετικέτα:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p>
</template> <script> export default { props: ['id'], };
</script>

404 Σφάλματα – Δεν βρέθηκε διαδρομή

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

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

{ path: '/:catchAll(.*)', name: 'ErrorPage', component: ErrorPage,
}

Η :catchAll είναι το δυναμικό τμήμα που λαμβάνει μια κανονική έκφραση του (.*) στην οποία το Vue Router χρησιμοποιεί για να ελέγξει εάν η διαδρομή στην οποία πλοηγείται ο χρήστης ορίζεται στο αρχείο διαμόρφωσης του δρομολογητή μας. Εάν δεν υπάρχουν τέτοιες διαδρομές, ο χρήστης κατευθύνεται στο στοιχείο, το οποίο στην περίπτωσή μας είναι το ErrorPage συστατικό:

<template> <h2>404 Page</h2> <p>This is a 404 page</p> <p>Visit home page <router-link to="/">here</router-link></p>
</template>

Ανακατευθύνσεις

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

{ path: '/fruits', name: 'Fruits', component: FruitsPage,
},
{ path: '/all-frults', redirect: '/fruits',
},

Το μόνο που κάνει ο παραπάνω κώδικας είναι ότι εάν ένας χρήστης επισκεφτεί, τη διαδρομή /all-fruits, θα τους ανακατευθύνει στο /fruits διαδρομή.

Πλοήγηση μέσω προγραμματισμού

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

Ιστορικό δρομολογητή

Μπορούμε να χρησιμοποιήσουμε το ιστορικό του προγράμματος περιήγησης για εύκολη πλοήγηση προς τα πίσω ή προς τα εμπρός, ανάλογα με τις προτιμήσεις μας. Αν θυμάστε, έχουμε ένα createRouter() λειτουργία στο αρχείο διαμόρφωσης του δρομολογητή όπου ορίσαμε α history τιμή, επιτρέποντας στον δρομολογητή Vue να παρακολουθεί το ιστορικό του δρομολογητή μας καθώς δρομολογούμε μέσω της εφαρμογής Ιστού.

Αυτό μας επιτρέπει να διασχίσουμε το ιστορικό του προγράμματος περιήγησης, με βάση μια υπό όρους, όπως ένα κλικ στο κουμπί:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p> <button @click="goBack">Go Back</button>
</template> <script> export default { props: ['id'], methods:{ goBack(){ this.$router.go(-1) } } };
</script>

Μπορούμε επίσης να αποφασίσουμε να προχωρήσουμε χρησιμοποιώντας το 1 αντί του -1 και ας υποθέσουμε ότι θέλουμε να κινηθούμε κατά 2 βήματα μπορούμε να χρησιμοποιήσουμε ένα από τα δύο 2 or -2.

Σπρώξτε

push() χρησιμοποιείται συνήθως μετά την πραγματοποίηση μιας ενέργειας και προσθέτει μια νέα καταχώρηση στη στοίβα ιστορικού. Για παράδειγμα, εάν ένας χρήστης συνδεθεί με επιτυχία, θα θέλαμε να πλοηγηθούμε στη σελίδα του πίνακα ελέγχου μέσω προγραμματισμού. Αυτό επιτυγχάνεται συμπεριλαμβάνοντας τη μέθοδο ώθησης δίπλα στο όνομα της διαδρομής:

this.$router.push({ name: 'Dashboard' });

Συμπέρασμα

Η δρομολόγηση είναι μία από τις βασικές λειτουργίες του Vue. Εκτός αν χτίζετε ένα Εφαρμογή μιας σελίδας (SPA), θα θέλετε να συνδέσετε πολλές σελίδες σε μια σελίδα προορισμού για να επιτρέψετε στους χρήστες να πλοηγηθούν σε αυτές.

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

• Coinsmart. Το καλύτερο ανταλλακτήριο Bitcoin και Crypto στην Ευρώπη.
• Platoblockchain. Web3 Metaverse Intelligence. Ενισχύθηκε η γνώση. ΕΛΕΥΘΕΡΗ ΠΡΟΣΒΑΣΗ.
• CryptoHawk. Ραντάρ Altcoin. Δωρεάν δοκιμή.
• Πηγή: https://stackabuse.com/guide-to-vue-router/