Частина 2: навчіться користуватися Vue Router зі своїм SPA

Дізнайтеся, як створити веб-сайт для доставки їжі за допомогою Vue.js, Vuex, Vue Router та Firebase.

Це частина друга моєї серії з чотирьох частин про створення програми Vue. Ось список усіх частин:

Частина 1: Встановлення Vue та побудова SPA за допомогою Vuetify та Vue Router

Частина 2: Використання Vue Router

Частина 3: Використання Vuex та доступ до API

Частина 4: Використання Firebase для автентифікації

Підсумок

У першій частині цієї серії ми створили наш додаток Vue, використовуючи Vue CLI. Крім того, ми додали Vuetify до програми. Я використовую Vuetify для стилізації програми. Я також скористаюся багатьма компонентами інтерфейсу, які він пропонує.

Після того, як все було встановлено, ми створили домашню сторінку нашої програми.

Використання Vue Router

Маршрутизатор Vue забезпечує навігацію для нашого додатку. Коли ви натискаєте кнопку ВХІД , вона перенаправить вас на сторінку для входу. Натиснувши кнопку МЕНЮ , ви перенаправите вас на сторінку, яка відображає доступні плани харчування.

router.js Файл містить налаштування для маршрутизації. Відкрийте цей файл. У цьому файлі ви побачите два маршрути. Той, який відображає компонент Home.vue, коли ви натискаєте ‘/’маршрут. Інший відображає компонент about.vue, коли ви натискаєте маршрут "about".

Нам потрібно буде створити маршрути для кожної сторінки в нашому додатку. Нашій програмі знадобляться такі маршрути:

• /
• / меню
• /увійти
• / приєднатися

Коли ми використовували Vue CLI для створення програми, ми вибрали встановити Vue Router. За замовчуванням це створило маршрути для '/', який є домашнім, і '/ about' для сторінки about. У частині 4 ми будемо використовувати сторінку about, щоб показати всі рецепти, замовлені користувачем.

Нам потрібно додати три нові маршрути до масиву маршрутів. Після додавання цих нових маршрутів ось так 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належить до папки подань. Все інше має бути в папці компонентів.

Створення нових подань

Нам потрібно створити нові уявлення для кожного з трьох нових маршрутів. У папці вигляд створіть такі три файли:

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

Всередині кожного з файлів додайте символ. Всередині макета є

тег із назвою сторінки.

Ось Menu.vueфайл:

Menu Page

export default { name: 'Menu'};

Ось signin.vueфайл:

Signin Page

export default { name: 'Signin'};

Ось Join.vueфайл:

Join Page

export default { name: 'Join'};

Зробіть пункти меню доступними для натискання

У нашому меню є чотири пункти, які користувач може натиснути. Вони є:

• Меню
• Профіль
• Увійти
• Приєднуйтесь

Ми хочемо налаштувати кожну з них так, що коли користувач натискає на них, він переводить їх на відповідну сторінку. Відкрийте файл AppNavigation.vue. У цьому розділі знайдіть меню. Все, що нам потрібно t o do is add to = "/ menu". Ми зробимо це для всіх чотирьох записів, але переконайтеся, що ми вказали правильний маршрут, який ми ined in tвизначили для файла 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!