Как создать SPA с помощью Vue.js, Vuex, Vuetify и Firebase: с помощью Vue Router

Часть 2: узнайте, как использовать Vue Router с вашим SPA

Узнайте, как создать веб-сайт доставки еды с помощью Vue.js, Vuex, Vue Router и Firebase.

Это вторая часть моей серии из четырех частей по созданию приложения Vue. Вот список всех частей:

Часть 1: Установка Vue и создание SPA с помощью Vuetify и Vue Router

Часть 3: Использование Vuex и доступ к API

Часть 4: Использование Firebase для аутентификации

Резюме

В первой части этой серии мы создали наше приложение Vue с помощью Vue CLI. Также мы добавили в приложение Vuetify. Я использую Vuetify для стилизации приложения. Я также воспользуюсь преимуществами многих компонентов пользовательского интерфейса, которые он предлагает.

После того, как все было установлено, мы стилизовали домашнюю страницу нашего приложения.

Использование Vue Router

Vue router обеспечивает навигацию для нашего приложения. Когда вы нажимаете кнопку ВОЙТИ, она перенаправляет вас на страницу для входа. Когда вы нажимаете кнопку МЕНЮ, она перенаправляет вас на страницу с доступными планами питания.

router.js file содержит конфигурацию для маршрутизации. Откройте этот файл. В этом файле вы увидите два маршрута. Тот, который отображает компонент Home.vue, когда вы нажимаете ‘/’ route. Другой отображает компонент about.vue, когда вы нажимаете маршрут «about».

Нам нужно будет создать маршруты для каждой страницы в нашем приложении. Нашему приложению потребуются следующие маршруты:

/
/меню
/войти
/присоединиться

Когда мы использовали Vue CLI для создания приложения, мы выбрали установку Vue Router. По умолчанию, это создает маршруты для «/», который является домашним, и «/ about» для страницы «О нас». В части 4 мы будем использовать страницу «О нас», чтобы показать все рецепты, заказанные пользователем.

Нам нужно добавить три новых маршрута в массив маршрутов. После добавления этих новых маршрутов наш router.js файл выглядит так:

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

Просмотр и компоненты

В нашем первом уроке мы создали несколько новых компонентов Vue. Я поместил эти компоненты в папку компонентов. Для этих трех новых компонентов мы не будем создавать их внутри папки компонентов. Вместо этого мы поместим их в папку просмотров. Причина в том, что все, что происходит с использованием URL-адреса типа /menu, принадлежит папке представлений. Все остальное должно быть в папке с компонентами.

Создание новых представлений

Нам нужно создать новые представления для каждого из трех новых маршрутов. В папке views создайте следующие три файла:

Menu.vue
Signin.vue
Join.vue

Внутри каждого файла добавьте ‹v-container› с ‹v-layout›. Внутри макета есть тег ‹h1› с названием страницы.

Вот файл Menu.vue:

<template>
    <v-container fluid>
        <v-layout>
            <h1>Menu Page</h1>
        </v-layout>
    </v-container>
</template>
<script>
export default {
    name: 'Menu'
};
</script>
<style scoped>
</style>

Вот файл signin.vue:

<template>
    <v-container fluid>
        <v-layout>
            <h1>Signin Page</h1>
        </v-layout>
    </v-container>
</template>
<script>
export default {
    name: 'Signin'
};
</script>
<style scoped>
</style>

Вот файл Join.vue:

<template>
    <v-container fluid>
        <v-layout>
            <h1>Join Page</h1>
        </v-layout>
    </v-container>
</template>
<script>
export default {
    name: 'Join'
};
</script>
<style scoped>
</style>

Делаем пункты меню доступными для нажатия

В нашем меню ‹v-toolbar› у нас есть четыре пункта, на которые может щелкнуть пользователь. Они есть:

Меню
Профиль
Войти
Присоединиться

Мы хотим настроить каждый из них так, чтобы, когда пользователь нажимает на них, они переходили на соответствующую страницу. Откройте файл AppNavigation.vue. В разделе ‹v-toolbar› найдите ‹v-btn› для Меню. Все, что нам нужно сделать, это добавить to="/menu". Мы сделаем это для всех четырех записей, но убедитесь, что мы указали правильный маршрут, который мы определили в файле router.js.

У нас нет пункта меню, чтобы вернуться на главную страницу. Мы можем исправить это, перенаправив имя приложения на домашнюю страницу. Но заголовок - это не кнопка, поэтому добавить to="/menu" не получится. Vue Router предоставляет возможность заключить ссылку в <router-link to=”/”>. Мы сделаем это для названия нашего приложения.

Вот как теперь выглядит моя AppNavigation:

<template>
    <span>
        <v-navigation-drawer app v-model="drawer" class="brown lighten-2" dark disable-resize-watcher>
            <v-list>
                <template v-for="(item, index) in items">
                    <v-list-tile :key="index">
                        <v-list-tile-content>
                            {{item.title}}
                        </v-list-tile-content>
                    </v-list-tile>
                    <v-divider :key="`divider-${index}`"></v-divider>
                </template>
            </v-list>
        </v-navigation-drawer>
        <v-toolbar app color="brown darken-4" dark>
            <v-toolbar-side-icon class="hidden-md-and-up" @click="drawer = !drawer"></v-toolbar-side-icon>
            <v-spacer class="hidden-md-and-up"></v-spacer>
            <router-link to="/">
                <v-toolbar-title to="/">{{appTitle}}</v-toolbar-title>
            </router-link>
            <v-btn flat class="hidden-sm-and-down" to="/menu">Menu</v-btn>
            <v-spacer class="hidden-sm-and-down"></v-spacer>
            <v-btn flat class="hidden-sm-and-down" to="/sign-in">SIGN IN</v-btn>
            <v-btn color="brown lighten-3" class="hidden-sm-and-down" to="/join">JOIN</v-btn>
        </v-toolbar>
    </span>
</template>
<script>
export default {
    name: 'AppNavigation',
    data() {
        return {
            appTitle: 'Meal Prep',
            drawer: false,
            items: [
                { title: 'Menu' },
                { title: 'Profile' }, 
                { title: 'Sign In' },
                { title: 'Join' }
            ]
        };
    }
};
</script>
<style scoped>
</style>

Когда мы это делаем, у нас возникает небольшая проблема с названием нашего приложения в меню. Он изменился с белого текста на синий с подчеркиванием. Это стиль по умолчанию для тега привязки. Мы можем преодолеть это, добавив следующий стиль:

a {
    color: white;
    text-decoration: none;
}

Теперь мы вернулись туда, где были. Если вы нажмете на все элементы в меню, они перенаправят вас на соответствующую страницу. У нас есть небольшая проблема с файлом About.vue. Этот файл отображает содержимое по-другому. Чтобы у нас была последовательность, обновите файл About.vue следующим образом:

<template>
    <v-container fluid>
        <v-layout>
            <h1>About Page</h1>
        </v-layout>
    </v-container>
</template>
<script>
export default {
    name: 'About'
};
</script>
<style scoped>
</style>

Получить код

Несмотря на то, что это серия из 4 частей, вы можете получить готовый код в моей учетной записи GitHub. Пожалуйста, помогите мне и пометьте репо, когда получите код.

Резюме

В этой части этой серии вы узнали:

как работает Vue Router
как загрузить новые маршруты
как настроить меню для загрузки каждой страницы

Что дальше

В следующей части этой серии мы рассмотрим использование Firebase для аутентификации. Vuex позволяет вам предоставлять «состояние» в вашем приложении. Мы будем подписываться на доступ к API рецептов. Из этого API мы будем получать рецепты для отображения пользователям на нашей странице меню.

Если вам понравилась эта статья, пожалуйста, похлопайте по ней. Если вы думаете, что эта статья принесет пользу кому-то другому, поделитесь ею с ними.

Если у вас есть вопросы или вы обнаружили что-то не так с кодом, оставьте комментарий. Если есть другие темы, о которых вы хотели бы, чтобы я написал, оставьте, пожалуйста, комментарий.