Πώς να δημιουργήσετε ένα SPA χρησιμοποιώντας Vue.js, Vuex, Vuetify και Firebase: χρησιμοποιώντας το Vue Router

Μέρος 2: Μάθετε πώς να χρησιμοποιείτε το Vue Router με το SPA σας

Μάθετε πώς μπορείτε να δημιουργήσετε έναν ιστότοπο παράδοσης γευμάτων χρησιμοποιώντας Vue.js, Vuex, Vue Router και Firebase.

Αυτό είναι το δεύτερο μέρος της τετραμερούς σειράς μου για τη δημιουργία μιας εφαρμογής Vue. Εδώ είναι μια λίστα με όλα τα μέρη:

Μέρος 1: Εγκατάσταση Vue και δημιουργία SPA χρησιμοποιώντας το Vuetify και το Vue Router

Μέρος 2: Χρήση του Vue Router

Μέρος 3: Χρήση του Vuex και πρόσβαση στο API

Μέρος 4: Χρήση του Firebase για έλεγχο ταυτότητας

ανακεφαλαιώσουμε

Στο πρώτο μέρος αυτής της σειράς, δημιουργήσαμε την εφαρμογή Vue χρησιμοποιώντας το Vue CLI. Επίσης, προσθέσαμε το Vuetify στην εφαρμογή. Χρησιμοποιώ το Vuetify για το στυλ της εφαρμογής. Θα εκμεταλλευτώ επίσης τα πολλά στοιχεία UI που προσφέρει.

Αφού εγκαταστήσαμε τα πάντα, διαμορφώσαμε την αρχική σελίδα της εφαρμογής μας.

Χρήση του Vue Router

Ο δρομολογητής Vue παρέχει την πλοήγηση για την εφαρμογή μας. Όταν κάνετε κλικ στο κουμπί ΕΙΣΟΔΟΣ , θα σας ανακατευθύνει στη σελίδα για να συνδεθείτε. Όταν κάνετε κλικ στο κουμπί MENU , θα σας ανακατευθύνει στη σελίδα που εμφανίζει τα διαθέσιμα γεύματα.

Το router.js αρχείο περιέχει τη διαμόρφωση για δρομολόγηση. Ανοίξτε αυτό το αρχείο. Σε αυτό το αρχείο, θα δείτε δύο διαδρομές. Αυτό που εμφανίζει το στοιχείο Home.vue όταν πατάτε ‘/’διαδρομή. Το άλλο εμφανίζει το στοιχείο about.vue όταν πατάτε τη διαδρομή "about".

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

  • /
  • /μενού
  • /Συνδεθείτε
  • /Συμμετοχή

Όταν χρησιμοποιήσαμε το Vue CLI για να δημιουργήσουμε την εφαρμογή, επιλέξαμε να εγκαταστήσουμε το Vue Router. Από προεπιλογή, αυτό δημιούργησε διαδρομές για '/' που είναι το σπίτι και '/ about' για τη σελίδα σχετικά. Στο μέρος 4 θα χρησιμοποιήσουμε τη σελίδα περίπου για να δείξουμε όλες τις συνταγές που έχει παραγγείλει ο χρήστης.

Πρέπει να προσθέσουμε τρεις νέες διαδρομές στον πίνακα διαδρομών. Μετά την προσθήκη αυτών των νέων διαδρομών, έτσι φαίνεται το router.jsαρχείο μας :

import Vue from 'vue';import Router from 'vue-router';import Home from './views/Home.vue';
Vue.use(Router);
export default new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', component: () => import('./views/About.vue') }, { path: '/menu', name: 'menu', component: () => import('./views/Menu.vue') }, { path: '/sign-in', name: 'signin', component: () => import('./views/Signin.vue') }, { path: '/join', name: 'join', component: () => import('./views/Join.vue') } ]});

Προβολή εναντίον στοιχείων

Στο πρώτο μας μάθημα, δημιουργήσαμε πολλά νέα στοιχεία του Vue. Έβαλα αυτά τα στοιχεία στο φάκελο των συστατικών. Για αυτά τα τρία νέα στοιχεία, δεν θα τα δημιουργήσουμε μέσα στο φάκελο στοιχείων. Αντ 'αυτού, θα τα βάλουμε μέσα στο φάκελο προβολών. Ο λόγος είναι ότι οτιδήποτε χτυπηθεί χρησιμοποιώντας ένα URL όπως /menuανήκει στο φάκελο προβολών. Όλα τα υπόλοιπα πρέπει να βρίσκονται στο φάκελο στοιχείων.

Δημιουργία νέων προβολών

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

  • Μενού.vue
  • Signin.vue
  • Εγγραφείτε

Μέσα σε κάθε ένα από τα αρχεία προσθέστε ένα με ένα. Μέσα στη διάταξη έχουν ένα

ετικέτα με το όνομα της σελίδας.

Εδώ είναι το Menu.vueαρχείο:

Menu Page

export default { name: 'Menu'};

Εδώ είναι το signin.vueαρχείο:

Signin Page

export default { name: 'Signin'};

Εδώ είναι το Join.vueαρχείο:

Join Page

export default { name: 'Join'};

Κάνοντας κλικ στα στοιχεία του μενού

Στο μενού μας έχουμε τέσσερα στοιχεία στα οποία μπορεί να κάνει κλικ ένας χρήστης. Αυτοί είναι:

  • Μενού
  • Προφίλ
  • Συνδεθείτε
  • Συμμετοχή

Θέλουμε να διαμορφώσουμε καθένα από αυτά έτσι ώστε όταν ένας χρήστης κάνει κλικ σε αυτά να τους μεταφέρει στην κατάλληλη σελίδα. Ανοίξτε το αρχείο AppNavigation.vue. Στην ενότητα βρείτε το για το Μενού. Το μόνο που χρειαζόμαστε t o do is add = = / menu ". Θα το κάνουμε και για τις τέσσερις καταχωρίσεις, αλλά βεβαιωθείτε ότι καθορίζουμε τη σωστή διαδρομή που ined in tορίζουμε το αρχείο router.js.

We don’t have a menu option to return to the home page. We can fix this by making the app name redirect to the home page. But the title is not a button, so adding to="/menu" will not work. Vue Router provides the option to surround a link with /”>. We will do this for our app title.

Here is what my AppNavigation looks like now:

 {{item.title}} 
     
       {{appTitle}}; Menu SIGN IN JOIN 
     
export default { name: 'AppNavigation', data() { return { appTitle: 'Meal Prep', drawer: false, items: [ { title: 'Menu' }, { title: 'Profile' }, { title: 'Sign In' }, { title: 'Join' } ] }; }};

When we do this, we have a slight problem with our app title in the menu. It has changed from being white text to being blue text with an underline. This is the default styling for an anchor tag. We can overcome this by adding the following style:

a { color: white; text-decoration: none;}

Now we are back to where we were. If you click on all the items on the menu, they will redirect you to the appropriate page. We only have a slight problem with the About.vue file. This file displays the contents differently. So that we have consistency, update the About.vue file to be this:

About Page

export default { name: 'About'};

Get the Code

Even though this is a 4-part series, you can get the finished code in my GitHub account. Please help me out and star the repo when you get the code.

Summary

In this part of this series, you have learned:

  • how Vue Router works
  • how to load new routes
  • how to setup menu to load each page

What’s Next

In the next part of this series, we will cover using Firebase for Authentication. Vuex allows you to provide “state” within your application. We will be signing up for access to a recipe API. From that API we will be getting recipes to display to users for our menu page.

If you enjoyed this article please clap for it. If you think somebody else would benefit from this article please share it with them.

If you have any questions or find anything wrong with the code, please leave a comment. If there are other topics you would like for me to write about, please leave a comment.

More Articles

Here are some other articles I have written that you might want to read.

Want a job in Tech? Here is how to use the top online marketplace for job seekers to get that job.

LinkedIn is the world’s largest talent pool with 3 million active job listings. Let me show you how you can tap into…medium.freecodecamp.orgInstantiation Patterns in JavaScript

Instantiation patterns are ways to create something in JavaScript. JavaScript provides four different methods to create…medium.comContributing to Open Source isn’t that hard: my journey to contributing to the Node.js project

As a developer, you should consider contributing to open source software. Many of your potential employers will look…medium.freecodecamp.org

Follow Me On Twitter!