Vue.js, Vuex, Vuetify və Firebase ilə SPA necə yaradılır: Vue Router ilə

Hissə 2: SPA ilə Vue Routerlardan necə istifadə edəcəyinizi öyrənin

Yemək hazırlanması tətbiqi

Vue.js, Vuex, Vue Router və Firebase-dən qida çatdırılması veb saytı yaratmaq üçün necə istifadə edəcəyinizi öyrənin.

Bu, bir Vue tətbiqi yaratmaqla bağlı dörd hissəli seriyamın ikinci hissəsidir. Bütün hissələrin siyahısı:

Hissə 1: Vue quraşdırın və Vuetify və Vue Router istifadə edərək bir SPA yaradın

Hissə 2: Vue Router istifadə

Hissə 3: Vuex istifadə etmək və API-yə giriş

Hissə 4: Doğrulama üçün Firebase istifadə

Xülasə

Bu seriyanın ilk hissəsində Vue tətbiqini Vue CLI istifadə edərək yaratdıq. Vuetify-ı tətbiqə əlavə etdik. Tətbiqi tərtib etmək üçün Vuetify istifadə edirəm. Təklif etdiyi bir çox UI komponentindən də istifadə edəcəyəm.

Hər şeyi qurduqdan sonra tətbiqetməmizin başlanğıc səhifəsini hazırladıq.

Vue Router istifadə olunur

Vue Router tətbiqi üçün naviqasiya təmin edir. BAXMA düyməsini vurduğunuzda, daxil ola biləcəyiniz səhifəyə aparılacaqsınız. MENU düyməsini basmaqla mövcud yemək planlarını göstərən səhifəyə aparacaqsınız.

Router.js faylı marşrutlaşdırma üçün konfiqurasiyanı ehtiva edir. Bu faylı açın. Bu sənəddə iki marşrut görə bilərsiniz. "/" Düyməsini basdıqda Home.vue komponentini göstərən biri. Digəri "haqqında" marşrutu tıkladığınızda about.vue komponentini göstərir.

Tətbiqimizdəki hər səhifə üçün marşrutlar yaratmalıyıq. Tətbiqimizin aşağıdakı marşrutlara ehtiyacı var:

  • /
  • / Menyu
  • /Daxil ol
  • / Qoşulmaq

Tətbiqi Vue CLI ilə yaratdığımızda Vue Router quraşdırmağa qərar verdik. Varsayılan olaraq, marşrutlar "/" üçün yaradıldı, yəni Haqqında səhifə üçün "/ about". 4-cü hissədə istifadəçinin sifariş etdiyi bütün reseptləri göstərmək üçün Haqqımızda səhifəsini istifadə edəcəyik.

Marşrut massivinə üç yeni marşrut əlavə etməliyik. Bu yeni marşrutları əlavə etdikdən sonra router.js sənədimiz belə olacaq:

Vue'yu "vue" dən idxal et; Yönləndiricini 'vue-router' dən idxal edin; Evi './views/Home.vue' səhifəsindən idxal et;
Vue.use (router);
Standart ixrac yeni router ({mode: "History", bazası: process.env.BASE_URL, marşrutlar: [{path: '/', name: "home", komponent: Home}, {path: '/ about', name : "Haqqında", komponent: () => import ('./ views / About.vue')}, {Yol: '/ menu', Ad: "Menyu", komponent: () => import ('./ baxışlar / Menu.vue ')}, {Yol:' / Giriş ', Ad: "Giriş", komponent: () => idxal (' ./ views / Signin.vue ')}, {Yol:' / join ' , ad: 'qoşul', komponent: () => idxal ('./ views / Join.vue')}]});

Komponentlərə baxın

İlk dərsimizdə bir neçə yeni Vue komponenti yaratdıq. Bu komponentləri komponentlər qovluğuna qoydum. Bu üç yeni komponent üçün komponentlər qovluğunda yaradılmır. Bunun əvəzinə baxışlar qovluğuna yerləşdirilir. Səbəbi / menyu kimi url ilə vurulan hər şeyin baxışlar qovluğuna aid olmasıdır. Qalan hər şey komponentlər qovluğunda olmalıdır.

Yeni baxışlar yaradın

Üç yeni marşrutun hər biri üçün yeni baxışlar yaratmalıyıq. Baxışlar qovluğunda aşağıdakı üç faylı yaradın:

  • Menyu.vue
  • Giriş. Səs
  • Qoşulun.vue

Faylların hər birinə a ilə əlavə edildi. Düzəndə bir var Səhifənin adı ilə etiketləyin.

Budur Menu.vue faylı: