Cara membangun SPA menggunakan Vue.js, Vuex, Vuetify, dan Firebase: menggunakan Vue Router

Bagian 2: Pelajari cara menggunakan Vue Router dengan SPA Anda

Pelajari cara membuat situs pengiriman makanan menggunakan Vue.js, Vuex, Vue Router, dan Firebase.

Ini adalah bagian dua dari seri empat bagian saya tentang membangun aplikasi Vue. Berikut adalah daftar semua bagian:

Bagian 1: Menginstal Vue dan Membangun SPA menggunakan Vuetify dan Vue Router

Bagian 2: Menggunakan Vue Router

Bagian 3: Menggunakan Vuex dan mengakses API

Bagian 4: Menggunakan Firebase untuk Otentikasi

Rekap

Pada bagian pertama dari seri ini, kami membuat aplikasi Vue menggunakan Vue CLI. Juga, kami menambahkan Vuetify ke aplikasi. Saya menggunakan Vuetify untuk menata aplikasi. Saya juga akan memanfaatkan banyak komponen UI yang ditawarkannya.

Setelah menginstal semuanya, kami menata halaman beranda aplikasi kami.

Menggunakan Vue Router

Vue router menyediakan navigasi untuk aplikasi kita. Ketika Anda mengklik tombol SIGN IN , itu akan mengarahkan Anda ke halaman untuk login. Saat Anda mengklik tombol MENU , Anda akan diarahkan ke halaman yang menunjukkan paket makanan yang tersedia.

The router.js file berisi konfigurasi untuk routing. Buka file itu. Di file itu, Anda akan melihat dua rute. Salah satu yang menampilkan komponen Home.vue saat Anda menekan ‘/’rute. Yang lainnya menampilkan komponen about.vue ketika Anda menekan rute 'about'.

Kita perlu membuat rute untuk setiap halaman di aplikasi kita. Aplikasi kita membutuhkan rute berikut:

  • /
  • /Tidak bisa
  • /masuk
  • /Ikuti

Ketika kami menggunakan Vue CLI untuk membuat aplikasi, kami memilih untuk menginstal Vue Router. Secara default, ini membuat rute untuk '/' yang merupakan rumah dan '/ tentang' untuk halaman tentang. Pada bagian 4 kita akan menggunakan halaman tentang untuk menampilkan semua resep yang telah dipesan pengguna.

Kita perlu menambahkan tiga rute baru ke larik rute. Setelah menambahkan rute baru ini, seperti inilah router.jsfile kita terlihat:

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

Lihat vs Komponen

Dalam pelajaran pertama kami, kami membuat beberapa komponen Vue baru. Saya menempatkan komponen ini di dalam folder komponen. Untuk ketiga komponen baru ini, kami tidak akan membuatnya di dalam folder komponen. Sebagai gantinya, kami akan menempatkannya di dalam folder views. Alasannya adalah bahwa apa pun yang dipukul menggunakan URL seperti /menutermasuk dalam folder views. Yang lainnya harus ada di folder komponen.

Membuat Tampilan baru

Kita perlu membuat tampilan baru untuk masing-masing dari tiga rute baru tersebut. Dalam folder tampilan, buat tiga file berikut:

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

Di dalam setiap file tambahkan a dengan a. Di dalam tata letak memiliki

tag dengan nama halaman.

Ini Menu.vuefilenya:

Menu Page

export default { name: 'Menu'};

Ini signin.vuefilenya:

Signin Page

export default { name: 'Signin'};

Ini Join.vuefilenya:

Join Page

export default { name: 'Join'};

Membuat Item Menu Dapat Diklik

Di menu kami, kami memiliki empat item yang dapat diklik pengguna. Mereka:

  • Tidak bisa
  • Profil
  • Masuk
  • Ikuti

Kami ingin mengkonfigurasi masing-masing sehingga ketika pengguna mengkliknya, itu akan membawa mereka ke halaman yang sesuai. Buka file AppNavigation.vue. Di bagian tersebut temukan untuk Menu. Yang kita butuhkan t o do is add ke = "/ menu". Kami akan melakukan ini untuk keempat entri, tetapi pastikan kami menentukan rute yang benar yang kami ined in ttentukan file 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!

Original text