Kā izveidot SPA, izmantojot Vue.js, Vuex, Vuetify un Firebase: izmantojot Vue Router

2. daļa: uzziniet, kā izmantot Vue Router ar savu SPA

Uzziniet, kā izveidot maltīšu piegādes vietni, izmantojot Vue.js, Vuex, Vue Router un Firebase.

Šī ir mana četrdaļīgās sērijas par Vue lietojumprogrammas veidošanu otrā daļa. Šeit ir visu daļu saraksts:

1. daļa: Vue instalēšana un SPA izveidošana, izmantojot Vuetify un Vue Router

2. daļa: Vue Router izmantošana

3. daļa: Vuex izmantošana un piekļuve API

4. daļa: Firebase izmantošana autentifikācijai

Atkārtoti

Šīs sērijas pirmajā daļā mēs izveidojām savu Vue lietojumprogrammu, izmantojot Vue CLI. Turklāt lietotnei pievienojām Vuetify. Lietotnes veidošanai izmantoju Vuetify. Es arī izmantošu daudzos lietotāja piedāvātos lietotāja interfeisa komponentus.

Pēc visa instalēšanas mēs izveidojām savas lietojumprogrammas mājas lapu.

Izmantojot Vue Router

Vue maršrutētājs nodrošina navigāciju mūsu lietojumprogrammai. Noklikšķinot uz pogas Pierakstīties , tā novirzīs jūs uz lapu, lai pieteiktos. Noklikšķinot uz pogas Izvēlne , tā novirzīs jūs uz lapu, kurā tiek rādīti pieejamie maltīšu plāni.

router.js Fails satur konfigurāciju maršrutēšanas. Atveriet šo failu. Šajā failā jūs redzēsiet divus maršrutus. Tas, kas parāda Home.vue komponentu, kad nospiežat ‘/’maršrutu. Otrais parāda komponentu about.vue, kad nospiedīsit maršrutu “about”.

Mums būs jāizveido maršruti katrai mūsu lietojumprogrammas lapai. Mūsu pieteikumam būs nepieciešami šādi maršruti:

  • /
  • / menu
  • /ielogoties
  • / pievienoties

Kad mēs izmantojām Vue CLI, lai izveidotu lietotni, mēs izvēlējāmies instalēt Vue Router. Pēc noklusējuma tas izveidoja maršrutus “/”, kas ir sākumlapa, un “/ par” apmēram lapai. 4. daļā mēs izmantosim aptuveni lapu, lai parādītu visas receptes, kuras lietotājs ir pasūtījis.

Maršrutu masīvā mums jāpievieno trīs jauni maršruti. Pēc šo jauno maršrutu pievienošanas mūsu router.jsfails izskatās šādi:

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

Skats pret komponentiem

Pirmajā nodarbībā mēs izveidojām vairākus jaunus Vue komponentus. Es ievietoju šos komponentus komponentu mapē. Šiem trim jaunajiem komponentiem mēs tos neveidosim komponentu mapē. Tā vietā mēs tos ievietosim skatu mapē. Iemesls ir tāds, ka viss, kas tiek skarts, izmantojot URL, /menupieder skatu mapē. Visam pārējam jābūt komponentu mapē.

Jaunu skatu veidošana

Mums jāizveido jauni skati katram no trim jaunajiem maršrutiem. Mapes skati izveidojiet šādus trīs failus:

  • Izvēlne. Taisnība
  • Pierakstīties. Taisnība
  • Join.vue

Katra faila iekšpusē pievienojiet a ar a. Izkārtojuma iekšpusē ir

tagu ar lapas nosaukumu.

Šeit ir Menu.vuefails:

Menu Page

export default { name: 'Menu'};

Šeit ir signin.vuefails:

Signin Page

export default { name: 'Signin'};

Šeit ir Join.vuefails:

Join Page

export default { name: 'Join'};

Izvēlnes vienumu klikšķināmība

Mūsu izvēlnē ir četri vienumi, uz kuriem lietotājs var noklikšķināt. Viņi ir:

  • Izvēlne
  • Profils
  • Ielogoties
  • Pievienojieties

Mēs vēlamies konfigurēt katru no tiem tā, ka, kad lietotājs noklikšķina uz tā, viņš tos novirza uz atbilstošo lapu. Atveriet failu AppNavigation.vue. Sadaļā atrodiet izvēlnei. Viss, kas mums vajadzīgs t o do is add līdz = "/ menu". Mēs to izdarīsim visiem četriem ierakstiem, taču pārliecinieties, ka norādījām pareizo maršrutu, kuru mēs ined in tizveicam failā 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!