SPA: n rakentaminen Vue.js, Vuex, Vuetify ja Firebase avulla: Vue Router

Osa 2: Opi käyttämään Vue Routeria SPA: n kanssa

Opi luomaan ateriatoimitussivusto käyttämällä Vue.js, Vuex, Vue Router ja Firebase.

Tämä on osa Vue-sovelluksen rakentamista koskevasta neliosaisesta sarjastani. Tässä on luettelo kaikista osista:

Osa 1: Vuen asentaminen ja SPA: n rakentaminen Vuetify- ja Vue Router -ohjelmaa käyttämällä

Osa 2: Vue-reitittimen käyttö

Osa 3: Vuexin käyttö ja API: n käyttö

Osa 4: Firebasen käyttö todennukseen

Kertaus

Tämän sarjan ensimmäisessä osassa loimme Vue-sovelluksemme käyttämällä Vue CLI: tä. Lisäsimme myös Vuetify-sovelluksen. Käytän Vuetifyä sovelluksen muotoiluun. Hyödynnän myös monia sen tarjoamia käyttöliittymäkomponentteja.

Saatuamme kaiken asennettu, teimme sovelluksemme kotisivun.

Vue Routerin käyttäminen

Vue-reititin tarjoaa navigoinnin sovelluksellemme. Kun napsautat SIGN IN- painiketta, se ohjaa sinut sisäänkirjautumissivulle. Kun napsautat MENU- painiketta, se ohjaa sinut sivulle, joka näyttää käytettävissä olevat ateriaohjelmat.

router.js Tiedosto sisältää määritykset reitittämiseen. Avaa tiedosto. Tiedostossa näet kaksi reittiä. Yksi, joka näyttää Home.vue-komponentin, kun osut ‘/’reittiin. Toinen näyttää about.vue-komponentin, kun osut reittiin noin.

Meidän on luotava reittejä sovelluksemme jokaiselle sivulle. Sovelluksemme tarvitsee seuraavat reitit:

  • /
  • / menu
  • /Kirjaudu sisään
  • /liittyä seuraan

Kun käytimme Vue CLI: tä sovelluksen luomiseen, valitsimme asentamaan Vue Router. Oletuksena tämä loi reitit hakusivulle '/', joka on koti, ja '/ noin'. Osassa 4 käytämme noin-sivua näyttämään kaikki käyttäjän tilaamat reseptit.

Meidän on lisättävä kolme uutta reittiä reittiryhmään. Kun olet lisännyt nämä uudet reitit, router.jstiedosto näyttää tältä :

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äytä vs. komponentit

Ensimmäisessä oppitunnissamme loimme useita uusia Vue-komponentteja. Sijoitin nämä komponentit komponenttikansion sisään. Näille kolmelle uudelle komponentille emme luo niitä komponenttikansioon. Sen sijaan laitamme ne näkymäkansioon. Syynä on, että kaikki, johon URL-osoitteen kaltaiset osuvat, /menukuuluu näkymäkansioon. Kaiken muun pitäisi olla komponenttikansiossa.

Uusien näkymien luominen

Meidän on luotava uudet näkymät kullekin kolmelle uudelle reitille. Luo seuraavat kolme tiedostoa näkymäkansioon:

  • Valikko. Oikea
  • Kirjaudu sisään
  • Join.vue

Lisää jokaisen tiedoston sisälle a ja a. Asettelun sisällä on

-tunniste sivun nimellä.

Tässä on Menu.vuetiedosto:

Menu Page

export default { name: 'Menu'};

Tässä on signin.vuetiedosto:

Signin Page

export default { name: 'Signin'};

Tässä on Join.vuetiedosto:

Join Page

export default { name: 'Join'};

Valikkokohteiden napsauttaminen

Valikossa on neljä kohdetta, joita käyttäjä voi napsauttaa. He ovat:

  • Valikko
  • Profiili
  • Kirjaudu sisään
  • Liittyä seuraan

Haluamme määrittää jokaisen näistä niin, että kun käyttäjä napsauttaa niitä, se vie ne oikealle sivulle. Avaa AppNavigation.vue-tiedosto. Löydät osiosta valikon. Kaikki mitä tarvitsemme t o do is add = "/ menu". Teemme tämän kaikkien neljän merkinnän kohdalla, mutta varmista, että määritämme oikean reitin, jonka me ined in thylkäämme router.js-tiedostossa.

Meillä ei ole valikkovaihtoehtoa palataksesi kotisivulle. Voimme korjata tämän tekemällä sovelluksen nimen ohjaamaan kotisivulle. Mutta otsikko ei ole painike, joten lisääminen to="/menu"ei onnistu. Vue Router tarjoaa mahdollisuuden ympäröi linkki /”>. 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!