Hogyan készítsünk SPA-t a Vue.js, a Vuex, a Vuetify és a Firebase használatával: a Vue Router használatával

Programozás

2. rész: Ismerje meg a Vue Router használatát az SPA-val

Ismerje meg, hogyan lehet étkezés-szállítási webhelyet létrehozni a Vue.js, a Vuex, a Vue Router és a Firebase használatával.

Ez a Vue alkalmazás felépítésével foglalkozó négy részes sorozatom második része. Itt található az összes alkatrész felsorolása:

1. rész: A Vue telepítése és egy SPA felépítése a Vuetify és a Vue Router használatával

2. rész: A Vue Router használata

3. rész: A Vuex használata és az API elérése

4. rész: A Firebase használata a hitelesítéshez

Újrafutóz

A sorozat első részében a Vue CLI segítségével hoztuk létre a Vue alkalmazást. Továbbá hozzáadtuk a Vuetify alkalmazást. A Vuetify-t használom az alkalmazás stílusához. Kihasználom az általa kínált sok UI-komponenst is.

Miután mindent telepítettünk, megterveztük alkalmazásunk kezdőlapját.

A Vue Router használata

A Vue router biztosítja a navigációt alkalmazásunkhoz. Ha rákattint a BEJELENTKEZÉS gombra, az átirányít az oldalra a bejelentkezéshez. Amikor a MENU gombra kattint, az átirányít arra az oldalra, amely az elérhető étkezési terveket mutatja.

A router.js fájl tartalmazza az útválasztás konfigurációját. Nyissa meg azt a fájlt. Ebben a fájlban két útvonalat fog látni. Olyan, amely a Home.vue komponenst jeleníti meg, amikor elér egy ‘/’útvonalat. A másik a about.vue komponenst jeleníti meg, amikor a 'about' útvonalra lép.

Létre kell hoznunk az útvonalakat alkalmazásunk minden oldalához. Alkalmazásunkhoz a következő útvonalakra lesz szükség:

  • /
  • /menü
  • /Bejelentkezés
  • /csatlakozik

Amikor a Vue CLI-t használtuk az alkalmazás létrehozásához, akkor a Vue Router telepítését választottuk. Alapértelmezés szerint ez létrehozta a '/' otthoni és a '/ about' útvonalakat a körülbelül oldalról. A 4. részben a about oldalt fogjuk használni, hogy megmutassuk a felhasználó által megrendelt összes receptet.

Három új útvonalat kell hozzáadnunk az útvonaltömbhöz. Ezen új útvonalak hozzáadása után a router.jsfájlunk így néz ki:

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

Nézd meg az összetevőket

Első leckénkben számos új Vue komponenst hoztunk létre. Ezeket az összetevőket a komponensek mappába helyeztem. Ehhez a három új komponenshez nem hozzuk létre őket a komponensek mappában. Ehelyett betesszük őket a nézetek mappába. Ennek az az oka, hogy bármi, amelyet egy URL-hez hasonlóan eltaláltak /menu, a nézetek mappába tartozik. Minden másnak a komponensek mappában kell lennie.

Új nézetek létrehozása

Új nézeteket kell létrehoznunk a három új útvonal mindegyikéhez. A nézetek mappában hozza létre a következő három fájlt:

  • Menü.igaz
  • Bejelentkezés. Igaz
  • Join.vue

Mindegyik fájl belsejében adjon hozzá egy a-t és a-t. Az elrendezésen belül van egy

címke az oldal nevével.

Itt van a Menu.vuefájl:

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

Itt van a signin.vuefájl:

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

Itt van a Join.vuefájl:

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

A menüpontok kattinthatóvá tétele

A menüben négy elem található, amelyekre a felhasználó kattinthat. Ők:

  • Menü
  • Profil
  • Bejelentkezés
  • Csatlakozik

Ezeket úgy akarjuk konfigurálni, hogy amikor a felhasználó rájuk kattint, akkor a megfelelő oldalra viszi őket. Nyissa meg az AppNavigation.vue fájlt. Ebben a részben keresse meg a Menüt. Minden amire szükségünk van td o do is ad= "/ menü". Ezt mind a négy bejegyzésnél meg fogjuk tenni, de mindenképpen adjuk meg a helyes útvonalat, amelyet a ined in trouter.js fájlban definiálunk.

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!