SPA-приложение на Vue.js #2

Фреймворк Vue.JS использует компонентный подход. И в этом видео я предлагаю вам разобрать принцип создания компонент на Vue и принцип работы Vue-Router.

Но сначала давайте немного дооформим главную страницу: заменим цвета, уберём ненужные элементы и добавим боковое меню, которое будет выдвигаться по клику на вот эту кнопку.

Давайте пока закомментируем наш навбар и дополним разметку недостающими элементами, чтобы соответствовать структуре страницы по Vuetify.

В общем смысле она должна выглядеть примерно следующим образом:

<v-app>
  <v-navigation-drawer app>
  </v-navigation-drawer>
  <v-app-bar app>
  </v-app-bar>
  <v-content>
    <v-container fluid>
      <router-view></router-view>
    </v-container>
  </v-content>
  <v-footer app>
  </v-footer>
</v-app>

Теперь разберём компоненты Vuetify из этой структуры по порядку:
1) v-navigation-drawer - это та самая боковая менюшка, которую вы видете на огромном количестве сайтов и в ещё большем количестве приложений, выполненных в стиле Material Design.
2) v-app-bar - навбар (верхнее меню, апп бар, называйте как угодно), который мы с вами добавили ещё в прошлом видео. Обычно апп-бар предназначен для поиска или доступа к каким-нибудь важным функциям: фильтрация контента, его добавление, доступ к боковому меню, поиск.
3) v-content - мы тоже вскользь затронули эту часть страницы в прошлом видео. Если говорить коротко, то тег v-content предназначен для помещения в него контентой части страницы, которая в данном случае будет у нас ```<router-view/>```. Тег v-container предназначен для упорядочивания контентной части, обычно он ограничивает контент по ширине и добавляет внутренние отступы, а атрибут fluid здесь для того, чтобы сказать контейнеру, что он может занять всё свободное место, которое ему удастся получить.
4) Ну про v-footer, думаю, особого смысла говорить нет, поскольку он нами, в принципе, использоваться не будет, да вы и сами наверняка всё прекрасно понимаете.

Давайте же перейдём к оформлению элементов, которые будут использоваться во всех страницах нашего приложения: v-navigation-drawer и v-app-bar. Эти части взаимосвязаны, поэтому будем делать их по порядку. Откомментируем наш app-bar и немного его поменяем: давайте уберём лишние элементы, например, у нас вряд ли будет использоваться поиск, лайки тоже под вопросом, а вот bullet points можно будет использовать в качестве фильтра (допустим, будем вписывать туда топ-5 стран по выявленным случаям). К тому же фиолетовый цвет это не совсем то, что мне хотелось бы здесь видеть, поэтому я поменяю deep-purple на primary, кроме этого давайте добавим класс headline к нашему заголовку страницы. Теперь можем вставить drawer. Предлагаю взять вот этот и заменить некоторые из его элементов на те, что мы будем использовать.

Для того, чтобы drawer у нас открывался и закрывался по нажатию на бургер-кнопку нужно добавить ему v-model. Пусть v-model так и называется: drawer. Теперь на саму бургер-кнопку нужно повесить событие, которое будет срабатывать на клик (@click="drawer = !drawer") и менять значение drawer на true или false. К слову, все v-model нужно регистрировать в export default, иначе они работать не будут. По умолчанию зададим значение false, чтобы drawer не был постоянно открыт. Отлично. Всё работает. Можно перейти к компонентам.

Давайте создадим компоненту, которая будет доступна по адресу countries. Так её и назовём. Структуру, в принципе, можно взять у компоненты HelloWorld, которую мы совсем скоро переделаем в ту страницу, которая будет нас встречать. Для начала в новой компоненте выведем какое-нибудь сообщение, чтобы видеть, что страница у нас изменилась и переход был осуществлен. Например, так и напишем "all countries". Теперь, когда мы удостоверились, что с export default всё хорошо — можем перейти к файлику index.js из папки router и добавить туда новый маршрут для только что созданной компоненты. Делаем по аналогии с компонентой HelloWorld. Так же импортируем и прописываем путь. И давайте теперь добавим router-link для этой компоненты, чтобы можно было её увидеть (к тегу <v-list-item> дописываем атрибут :to="item.link", не забудьте в массиве items добавить свойство link для каждого элемента. Двоеточие здесь нужно потому, что значение, которое принимает этот атрибут получается извне).