13. Проєкт [vuejs-11]: маршрутизація та навігація

Маршрутизація — це те, що дозволить користувачеві переходити між різними сторінками додатка.

Структура проекту така:

13.1. Встановлення залежностей

Для маршрутизації в [Vue.js] потрібна залежність [vue-router]:

• у [1-3] встановлюється залежність [vue-router];
• у [4-6] після встановлення залежності було змінено файл [package.json];

13.2. Скрипт маршрутизації [router.js]

Правила навігації додатка записані у файлі [router.js] (ім’я скрипта може бути будь-яким):

// імпорти, необхідні для маршрутизації
import Vue from 'vue'
import VueRouter from 'vue-router'

// плагін маршрутизації
Vue.use(VueRouter)

// цільові компоненти маршрутизації
import Component1 from './components/Component1.vue'
import Component2 from './components/Component2.vue'
import Component3 from './components/Component3.vue'


// маршрути додатка
const routes = [
  // головна сторінка
  { path: '/', name: 'home', component: Component1 },
  // Component1
  {
    path: '/vue1', name: 'vue1', component: Component1
  },
  {
    // Component2
    path: '/vue2', name: 'vue2', component: Component2
  },
  // Component3
  {
    path: '/vue3', name: 'vue3', component: Component3
  },
]

// маршрутизатор
const router = new VueRouter({
  routes,
  mode: 'history',
})

// експорт з маршрутизатора
export default router

Коментарі

• скрипт [router.js] визначатиме правила маршрутизації нашого додатка;
• рядки 1–6: активація плагіна [vue-router], необхідного для маршрутизації. Для цієї активації потрібно імпортувати клас/функцію [Vue] (рядок 2) та плагін маршрутизації (рядок 3). Цей плагін було встановлено разом із залежністю [router], яку ми щойно встановили;
• рядки 8–11: імпорт цільових представлень маршрутизації;
• рядки 15–21: визначення масиву маршрутів. Кожен елемент цього масиву є об’єктом із такими властивостями:
  • [path]: URL подання, яке ми хочемо бачити у полі [URL] браузера. Тут можна вказати що завгодно;
  • [name]: назва маршруту. Тут також можна вказати будь-що;
  • [component]: компонент, який відображає вигляд. Тут обов’язково має бути вказано існуючий компонент;

Отже, тут буде чотири маршрути [/, /vue1, /vue2, /vue3].

• рядки 33–36: маршрутизатор є екземпляром класу [VueRouter], імпортованого у рядку 3. Конструктор [VueRouter] тут використовується з двома параметрами:
  • маршрути додатка;
  • режим запису URL у браузері: режим за замовчуванням [hash] записує URL у формі [localhost:8080/#/vue1] (# — це хеш). Режим [history] видаляє символ # [localhost:8080/vue1];
• рядок 39: експортуємо маршрутизатор;

13.3. Головний скрипт [main.js]

Головний скрипт [main.js] має такий вигляд:

// імпорт
import Vue from 'vue'
import App from './App.vue'

// плагіни
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);

// Bootstrap
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// маршрутизатор
import monRouteur from './router'

// конфігурація
Vue.config.productionTip = false

// інстанціювання проєкту [App]
new Vue({
  name: "app",
  // головний вигляд
  render: h => h(App),
  // маршрутизатор
  router: monRouteur,
}).$mount('#додаток')

Коментарі

• рядок 14: імпортуємо маршрутизатор, експортований скриптом [router.js];
• рядок 25: цей маршрутизатор передано як параметр конструктору класу [Vue], який відобразить головний вигляд [App], пов’язаний із властивістю [router] цього вигляду;

13.4. Головний вигляд [App]

Код головного виду такий:

<template>
  <div class="container">
    <b-card>
      <!-- повідомлення -->
      <b-alert show variant="success" align="center">
        <h4>[vuejs-11] : routage et navigation</h4>
      </b-alert>
      <!-- поточний вигляд маршрутизації -->
      <router-view />
    </b-card>
  </div>
</template>

<script>
  export default {
    name: "app"
  };
</script>

Коментарі

• рядок 9: відображає поточний вигляд маршрутизації. Тег <router-view> розпізнається лише в тому випадку, якщо властивість [router] цього виду була ініціалізована;

13.5. Верстка переглядів

Верстка переглядів забезпечується наступним компонентом [Layout]:

<template>
  <!-- рядок -->
  <div>
    <b-row>
      <!-- зона з трьома стовпцями -->
      <b-col cols="2" v-if="left">
        <slot name="left" />
      </b-col>
      <!-- зона з дев'ятьма стовпцями -->
      <b-col cols="10" v-if="right">
        <slot name="right" />
      </b-col>
    </b-row>
  </div>
</template>

<script>
  export default {
    // параметри
    props: {
      left: {
        type: Boolean
      },
      right: {
        type: Boolean
      }
    }
  };
</script>

Ми вже використовували та пояснювали це верстання у проєкті [vuejs-06] у розділі [vuejs-06].

13.6. Компонент навігації

Компонент [Navigation] надає користувачеві меню навігації:

Компонент, який генерує блок [1], є таким:

<template>
  <!-- меню Bootstrap із трьома пунктами -->
  <b-nav vertical>
    <b-nav-item to="/vue1" exact exact-active-class="active">Vue 1</b-nav-item>
    <b-nav-item to="/vue2" exact exact-active-class="active">Vue 2</b-nav-item>
    <b-nav-item to="/vue3" exact exact-active-class="active">Vue 3</b-nav-item>
  </b-nav>
</template>

• цей код генерує блок 1 із трьох посилань, що забезпечують навігацію;
• атрибут [to] тегів <b-nav-item> повинен відповідати одній із властивостей [path] маршрутів маршрутизатора додатка;

13.7. Види

Вигляд № 1 має такий вигляд:

Зони [3-4] генеруються таким компонентом [Component1]:

<template>
  <Layout :left="true" :right="true">
    <!-- навігація -->
    <Navigation slot="left" />
    <!-- повідомлення-->
    <b-alert show variant="primary" slot="right">Vue 1</b-alert>
  </Layout>
</template>

<script>
  import Navigation from './Navigation';
  import Layout from './Layout';

  export default {
    name: "component1",
    // використані компоненти
    components: {
      Layout, Navigation
    }
  };
</script>

Коментарі

• рядок 2: вид № 1 використовує макет компонента [Layout], що складається з двох слотів під назвою [left, right];
• рядок 4: меню навігації розміщено в лівому слоті. Це область [3], яку ми бачимо вище;
• рядок 6: у правому слоті розміщено повідомлення. Це область [4], яку ми бачимо вище;

Види 2 і 3 аналогічні.

Вигляд № 2, що відображається компонентом [Component2]:

<!-- вид № 2 -->
<template>
  <Layout :left="true" :right="true">
    <!-- навігація -->
    <Navigation slot="left" />
    <!-- повідомлення -->
    <b-alert show variant="secondary" slot="right">Vue 2</b-alert>
  </Layout>
</template>

<script>
  import Navigation from './Navigation';
  import Layout from './Layout';

  export default {
    name: "component2",
    // компоненти виду
    components: {
      Layout, Navigation
    }
  };
</script>

Вигляд № 3, що відображається компонентом [Component3]:

<!-- вид № 3 -->
<template>
  <Layout :left="true" :right="true">
    <!-- навігація -->
    <Navigation slot="left" />
    <!-- повідомлення -->
    <b-alert show variant="info" slot="right">Vue 3</b-alert>
  </Layout>
</template>

<script>
  import Navigation from "./Navigation";
  import Layout from "./Layout";

  export default {
    name: "component3",
    // компоненти подання
    components: {
      Layout,
      Navigation
    }
  };
</script>

13.8. Виконання проєкту

Під час виконання відображається такий вигляд:

• у [1], URL є [http://localhost:8080]. Отже, було виконано таке правило маршрутизації:

{ path: '/', name: 'home', component: Component1 }

Отже, було відображено компонент [Component1]. Він відображає вигляд № 1 [2]. Тепер натиснімо на посилання [Vue 1], код якого такий:

<b-nav-item to="/vue1" exact exact-active-class="active">Vue 1</b-nav-item>

Екран виглядає наступним чином:

• у [3] було виконано таке правило маршрутизації:

path: '/vue1', name: 'vue1', component: Component1

Отже, знову було відображено компонент [Component1], а отже, і вигляд № 1 [4]. Тепер натиснімо на посилання [Vue 2], код якого такий:

<b-nav-item to="/vue2" exact exact-active-class="active">Vue 2</b-nav-item>

Новий вигляд виглядає так:

• у [5] було виконано таке правило маршрутизації:

path: '/vue2', name: 'vue2', component: Component2

Отже, було відображено компонент [Component2], а отже, і вигляд № 2. Якщо тепер ми натиснемо на посилання [Vue 3], код якого такий:

<b-nav-item to="/vue3" exact exact-active-class="active">Vue 3</b-nav-item>

Ми отримаємо такий новий вигляд:

• у [6] було виконано таке правило маршрутизації:

path: '/vue3', name: 'vue3', component: Component3

Отже, відобразився компонент [Component3], тобто вигляд № 3 [8].