Kako izraditi SPA pomoću Vue.js, Vuex, Vuetify i Firebase: pomoću usmjerivača Vue

Programiranje

Dio 2: naučite kako koristiti Vue usmjerivač sa svojim SPA centrom

Naučite kako izraditi web mjesto za dostavu obroka pomoću Vue.js, Vuex, Vue Routera i Firebasea.

Ovo je drugi dio moje četverodijelne serije o izradi aplikacije Vue. Evo popisa svih dijelova:

1. dio: Instalacija Vue-a i izgradnja SPA-a pomoću Vuetify-a i Vue usmjerivača

Dio 2: Korištenje Vue usmjerivača

Dio 3: Korištenje Vuexa i pristup API-ju

Dio 4: Korištenje Firebasea za provjeru autentičnosti

Rekapitulacija

U prvom dijelu ove serije stvorili smo našu Vue aplikaciju koristeći Vue CLI. Također, u aplikaciju smo dodali Vuetify. Za oblikovanje aplikacije koristim Vuetify. Također ću iskoristiti mnoge komponente korisničkog sučelja koje nudi.

Nakon što smo sve instalirali, oblikovali smo početnu stranicu naše aplikacije.

Korištenje usmjerivača Vue

Vue usmjerivač pruža navigaciju za našu aplikaciju. Kad kliknete na gumb PRIJAVA , preusmjerit će vas na stranicu za prijavu. Kada kliknete gumb MENU , preusmjerit će vas na stranicu koja prikazuje dostupne planove obroka.

router.js Datoteka sadrži konfiguraciju za usmjeravanje. Otvorite tu datoteku. U toj datoteci vidjet ćete dvije rute. Onaj koji prikazuje komponentu Home.vue kada pritisnete ‘/’rutu. Drugi prikazuje komponentu about.vue kada pritisnete rutu "about".

Morat ćemo stvoriti rute za svaku stranicu u našoj aplikaciji. Za našu će aplikaciju trebati sljedeće rute:

  • /
  • /izbornik
  • /Prijaviti se
  • /pridružiti

Kada smo za izradu aplikacije koristili Vue CLI, odlučili smo instalirati Vue usmjerivač. Prema zadanim postavkama, ovo je stvorilo rute za '/' koja je početna i '/ about' za stranicu o. U 4. dijelu koristit ćemo stranicu about kako bismo prikazali sve recepte koje je korisnik naručio.

Moramo dodati tri nove rute u niz ruta. Nakon dodavanja ovih novih ruta, ovako router.jsizgleda naša datoteka:

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') } ]});

Prikaz u odnosu na komponente

U našoj prvoj lekciji stvorili smo nekoliko novih Vue komponenata. Te sam komponente smjestio u mapu komponenata. Za ove tri nove komponente nećemo ih stvarati unutar mape komponenata. Umjesto toga, stavit ćemo ih u mapu pogleda. Razlog je taj što sve što se pogodi pomoću URL-a poput /menupripada u mapu pogleda. Sve ostalo trebalo bi biti u mapi komponenata.

Stvaranje novih pogleda

Moramo stvoriti nove poglede za svaku od tri nove rute. U mapi Pogled stvorite sljedeće tri datoteke:

  • Izbornik.vue
  • Signin.vue
  • Pridružite se.vue

Unutar svake datoteke dodajte znak s. Unutar izgleda ima

oznaka s nazivom stranice.

Evo Menu.vuedatoteke:

Menu Page
export default { name: 'Menu'};

Evo signin.vuedatoteke:

Signin Page
export default { name: 'Signin'};

Evo Join.vuedatoteke:

Join Page
export default { name: 'Join'};

Čitanje stavki izbornika

U našem izborniku imamo četiri stavke koje korisnik može kliknuti. Oni su:

  • izbornik
  • Profil
  • Prijaviti se
  • Pridružiti

Želimo konfigurirati svaku od njih tako da ih korisnik klikne na njih i preusmjeri na odgovarajuću stranicu. Otvorite datoteku AppNavigation.vue. U odjeljku pronađite izbornik. Sve što nam treba t o do is add to = "/ menu". Učinit ćemo to za sva četiri unosa, ali svakako navedite točnu rutu koju ined in tdefiniramo u datoteci 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!