Hoe een spa te bouwen met Vue.js, Vuex, Vuetify en Firebase: met Vue Router

Deel 2: leer hoe u Vue Router gebruikt met uw SPA

Leer hoe u een website voor maaltijdbezorging maakt met Vue.js, Vuex, Vue Router en Firebase.

Dit is deel twee van mijn vierdelige serie over het bouwen van een Vue-applicatie. Hier is een lijst van alle onderdelen:

Deel 1: Vue installeren en een spa bouwen met Vuetify en Vue Router

Deel 2: Vue Router gebruiken

Deel 3: Vuex gebruiken en toegang krijgen tot API

Deel 4: Firebase gebruiken voor verificatie

Samenvatting

In het eerste deel van deze serie hebben we onze Vue-applicatie gemaakt met behulp van de Vue CLI. We hebben ook Vuetify aan de app toegevoegd. Ik gebruik Vuetify voor het stylen van de app. Ik zal ook profiteren van de vele UI-componenten die het biedt.

Nadat we alles hadden geïnstalleerd, hebben we de startpagina van onze applicatie gestileerd.

Vue Router gebruiken

Vue-router biedt de navigatie voor onze applicatie. Wanneer u op de knop AANMELDEN klikt, wordt u doorgestuurd naar de pagina om in te loggen. Wanneer u op de MENU- knop klikt, wordt u doorgestuurd naar de pagina met de beschikbare maaltijdplannen.

Het router.js bestand bevat de configuratie voor routering. Open dat bestand. In dat bestand zie je twee routes. Een die de Home.vue-component weergeeft wanneer u op ‘/’route klikt . De andere geeft de component about.vue weer wanneer u op de route 'about' klikt.

We zullen routes moeten maken voor elke pagina in onze applicatie. Onze applicatie heeft de volgende routes nodig:

  • /
  • /menu
  • /aanmelden
  • / toetreden

Toen we de Vue CLI gebruikten om de app te maken, hebben we ervoor gekozen om Vue Router te installeren. Standaard creëerde dit routes voor '/' wat home is en '/ about' voor de about-pagina. In deel 4 zullen we de over-pagina gebruiken om alle recepten te tonen die de gebruiker heeft besteld.

We moeten drie nieuwe routes toevoegen aan de routes-array. Na het toevoegen van deze nieuwe routes, router.jsziet ons bestand er zo uit:

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

Bekijk versus componenten

In onze eerste les hebben we verschillende nieuwe Vue-componenten gemaakt. Ik heb deze componenten in de componentenmap geplaatst. Voor deze drie nieuwe componenten zullen we ze niet aanmaken in de componentenmap. In plaats daarvan plaatsen we ze in de map views. De reden is dat alles dat wordt geraakt met een URL zoals /menuthuishoort in de map views. Al het andere zou in de map componenten moeten staan.

Nieuwe weergaven maken

We moeten nieuwe weergaven maken voor elk van de drie nieuwe routes. Maak in de map views de volgende drie bestanden:

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

Voeg binnen elk van de bestanden een toe met een. Binnenin de lay-out hebben een

tag met de naam van de pagina.

Hier is het Menu.vuebestand:

Menu Page

export default { name: 'Menu'};

Hier is het signin.vuebestand:

Signin Page

export default { name: 'Signin'};

Hier is het Join.vuebestand:

Join Page

export default { name: 'Join'};

De menu-items klikbaar maken

In ons menu hebben we vier items waarop een gebruiker kan klikken. Zij zijn:

  • Menu
  • Profiel
  • Aanmelden
  • Doe mee

We willen elk van deze zo configureren dat wanneer een gebruiker erop klikt, deze naar de juiste pagina gaat. Open het AppNavigation.vue-bestand. Zoek in de sectie de voor het menu. Alles wat we nodig hebben is t o do is add to = "/ menu". We zullen dit voor alle vier de items doen, maar zorg ervoor dat we de juiste route specificeren die we het ined in trouter.js-bestand definiëren.

We hebben geen menuoptie om terug te keren naar de startpagina. We kunnen dit oplossen door de app-naam om te leiden naar de startpagina. Maar de titel is geen knop, dus toevoegen to="/menu"werkt niet. Vue Router biedt de mogelijkheid om een ​​link te omringen met /”>. 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!