Cum se construiește un SPA folosind Vue.js, Vuex, Vuetify și Firebase: folosind Vue Router

Partea 2: aflați cum să utilizați Vue Router cu SPA-ul dvs.

Aflați cum să creați un site web de livrare a meselor folosind Vue.js, Vuex, Vue Router și Firebase.

Aceasta este partea a doua din seria mea compusă din patru părți despre construirea unei aplicații Vue. Iată o listă cu toate părțile:

Partea 1: Instalarea Vue și construirea unui SPA folosind Vuetify și Vue Router

Partea 2: Utilizarea Vue Router

Partea 3: Utilizarea Vuex și accesarea API-ului

Partea 4: Utilizarea Firebase pentru autentificare

Recapitulare

În prima parte a acestei serii, am creat aplicația noastră Vue folosind Vue CLI. De asemenea, am adăugat Vuetify în aplicație. Folosesc Vuetify pentru stilizarea aplicației. De asemenea, voi profita de numeroasele componente UI pe care le oferă.

După ce am instalat totul, am creat pagina principală a aplicației noastre.

Utilizarea Vue Router

Ruterul Vue oferă navigarea pentru aplicația noastră. Când faceți clic pe butonul SIGN IN , vă va redirecționa către pagină pentru a vă autentifica. Când faceți clic pe butonul MENU , acesta vă va redirecționa către pagina care afișează planurile de masă disponibile.

router.js Fișierul conține configurația pentru rutare. Deschideți fișierul respectiv. În acel fișier, veți vedea două rute. Unul care afișează componenta Home.vue atunci când atingeți ‘/’ruta. Cealaltă afișează componenta about.vue atunci când atingeți ruta „about”.

Va trebui să creăm rute pentru fiecare pagină din aplicația noastră. Aplicația noastră va avea nevoie de următoarele rute:

  • /
  • /meniul
  • /conectare
  • /a te alatura

Când am folosit Vue CLI pentru a crea aplicația, am selectat instalarea Vue Router. În mod implicit, acest lucru a creat rute pentru „/” care este acasă și „/ despre” pentru pagina despre. În partea 4 vom folosi pagina despre pentru a afișa toate rețetele comandate de utilizator.

Trebuie să adăugăm trei rute noi la matricea de rute. După adăugarea acestor noi rute, așa router.jsarată fișierul nostru :

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

Vizualizare vs Componente

În prima noastră lecție, am creat mai multe componente noi Vue. Am plasat aceste componente în dosarul componentelor. Pentru aceste trei componente noi, nu le vom crea în dosarul componentelor. În schimb, le vom introduce în dosarul de vizualizări. Motivul este că orice lucru care este accesat folosind o adresă URL ca /menuaparține în folderul de vizualizări. Toate celelalte ar trebui să se afle în folderul componente.

Crearea de vizualizări noi

Trebuie să creăm vederi noi pentru fiecare dintre cele trei rute noi. În folderul de vizualizări creați următoarele trei fișiere:

  • Meniu.vue
  • Conectați-vă
  • Alăturați-vă

În interiorul fiecăruia dintre fișiere adăugați un cu un. În interiorul aspectului aveți un

etichetați cu numele paginii.

Iată Menu.vuefișierul:

Menu Page

export default { name: 'Menu'};

Iată signin.vuefișierul:

Signin Page

export default { name: 'Signin'};

Iată Join.vuefișierul:

Join Page

export default { name: 'Join'};

Faceți clic pe elementele din meniu

În meniul nostru avem patru elemente pe care un utilizator poate face clic. Sunt:

  • Meniul
  • Profil
  • Conectare
  • A te alatura

Vrem să configurăm fiecare dintre acestea astfel încât, atunci când un utilizator face clic pe ele, să le ducă la pagina corespunzătoare. Deschideți fișierul AppNavigation.vue. În secțiune găsiți meniul. Tot ce avem nevoie o do is adpentru a d = "/ meniu". Vom face acest lucru pentru toate cele patru intrări, dar asigurați-vă că specificăm ruta corectă pe care o ined in tdefinim fișierul 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!