Sådan oprettes en SPA ved hjælp af Vue.js, Vuex, Vuetify og Firebase: ved hjælp af Vue Router

Del 2: Lær hvordan du bruger Vue Router med din SPA

Lær hvordan du opretter et websted til levering af måltider ved hjælp af Vue.js, Vuex, Vue Router og Firebase.

Dette er del to af min firedelte serie om opbygning af en Vue-applikation. Her er en liste over alle dele:

Del 1: Installation af Vue og opbygning af et SPA ved hjælp af Vuetify og Vue Router

Del 2: Brug af Vue Router

Del 3: Brug af Vuex og adgang til API

Del 4: Brug af Firebase til godkendelse

Resumé

I den første del af denne serie oprettede vi vores Vue-applikation ved hjælp af Vue CLI. Vi tilføjede også Vuetify til appen. Jeg bruger Vuetify til styling af appen. Jeg vil også drage fordel af de mange UI-komponenter, den tilbyder.

Efter at have fået alt installeret stylede vi hjemmesiden til vores applikation.

Brug af Vue Router

Vue-router giver navigation til vores applikation. Når du klikker på knappen LOG PÅ , omdirigerer den dig til siden for at logge ind. Når du klikker knappen MENU , omdirigeres du til den side, der viser de tilgængelige måltidsplaner.

Den router.js fil indeholder konfigurationen til at dirigere. Åbn filen. I den fil vil du se to ruter. En der viser Home.vue-komponenten, når du rammer ‘/’ruten. Den anden viser komponenten about.vue, når du rammer ruten 'omkring'.

Vi bliver nødt til at oprette ruter til hver side i vores ansøgning. Vores ansøgning har brug for følgende ruter:

  • /
  • /menu
  • /Log ind
  • /tilslutte

Da vi brugte Vue CLI til at oprette appen, valgte vi at installere Vue Router. Som standard oprettede dette ruter for '/' som er hjemme og '/ om' for om siden. I del 4 bruger vi om-siden til at vise alle de opskrifter, som brugeren har bestilt.

Vi er nødt til at tilføje tre nye ruter til rutearrayet. Efter at have tilføjet disse nye ruter router.jsser vores fil sådan ud:

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

Vis vs komponenter

I vores første lektion oprettede vi flere nye Vue-komponenter. Jeg placerede disse komponenter inde i komponentmappen. For disse tre nye komponenter opretter vi dem ikke i komponentmappen. I stedet placerer vi dem i visningsmappen. Årsagen er, at alt, hvad der rammes ved hjælp af en URL, /menuhører til i visningsmappen. Alt andet skal være i komponentmappen.

Oprettelse af nye visninger

Vi er nødt til at skabe nye visninger for hver af de tre nye ruter. Opret følgende tre filer i visningsmappen:

  • Menu.vue
  • Signin.vue
  • Join.vue

Inde i hver af filerne tilføjes en med en. Inde i layoutet har en

tag med navnet på siden.

Her er Menu.vuefilen:

Menu Page

export default { name: 'Menu'};

Her er signin.vuefilen:

Signin Page

export default { name: 'Signin'};

Her er Join.vuefilen:

Join Page

export default { name: 'Join'};

At gøre menupunkterne klikbare

I vores menu har vi fire emner, som en bruger kan klikke på. De er:

  • Menu
  • Profil
  • Log ind
  • Tilslutte

Vi ønsker at konfigurere hver af disse, så når en bruger klikker på dem, tager den dem til den relevante side. Åbn filen AppNavigation.vue. I afsnittet finder du menuen. Alt hvad vi behøver t o do is add til = "/ menu". Vi gør dette for alle fire poster, men sørg for at angive den korrekte rute, som vi def ined in than router.js-filen.

Vi har ikke en menufunktion til at vende tilbage til hjemmesiden. Vi kan ordne dette ved at omdirigere appnavnet til hjemmesiden. Men titlen er ikke en knap, så tilføjelse to="/menu"fungerer ikke. Vue Router giver mulighed for at omgive et link med /”>. 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!