Vue.js-маршрутизатор

Vue.js - це реактивний фреймворк javascript, який використовується для створення інтерфейсів користувача (користувальницькі інтерфейси) та SPA (односторінкові програми), і розробники люблять кодувати та відчувати свободу та комфорт під час розробки програм у Vue.js. Для цілей маршрутизації, Vue.js не забезпечує вбудовану функцію маршрутизації. Але існує офіційна стороння бібліотека з назвою Vue Router для надання цієї функції. За допомогою цієї функції ми можемо здійснювати навігацію між веб-сторінками, але без перезавантаження. Отже, у цій статті ми побачимо, як ми можемо встановити та використовувати Vue Router у Vue.js.

Встановлення

Ми можемо встановити маршрутизатор Vue у існуючий Vue.js, виконавши наступну команду в терміналі

npm встановити vue-router

Після успішної установки нам потрібно імпортувати VueRouter в основному.js у каталозі src, використовуючи наступний синтаксис

імпортувати Vue з 'vue'
імпортувати маршрутизатор з './ маршрутизатор '
Vue.використання (маршрутизатор)

Після імпорту маршрутизатора ви можете піти і використовувати vue-router у своєму проекті.

Але якщо ви встановлюєте Vue.js за допомогою Vue CLI. Вам не знадобиться цей додатковий крок встановлення. Ви можете додати плагін vue-router під час вибору пресету.

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

Використання vue-маршрутизатора дуже просте і просте у використанні. Спочатку в шаблоні або HTML

У цьому досить простому і зрозумілому прикладі vue-router. Ми створили просту навігацію за допомогою компонентів маршрутизатора та надаємо посилання за допомогою підставки з назвою 'to'. Посилання маршрутизатора працює так само, як прив'язка тегу 'a'. Він фактично відображається як тег 'a' за замовчуванням. У поданні маршрутизатора ми матимемо відносний компонент, який відповідає маршруту.

У javascript нам спочатку потрібно зареєструвати та імпортувати компоненти, щоб визначити їх маршрути. Ми припускаємо, що у нас є компонент з іменем Comp.vue в каталозі подань, до якого ми будемо імпортувати в індекс маршрутизатора.js у каталозі маршрутизатора та визначте його як маршрут.

Для імпорту компонента ми використовуємо наступне твердження

імпортувати Comp з "… / views / Comp.vue ";

Після імпорту ми повинні визначити маршрут зараз і зіставити його з компонентом. Подобається це,

const routes = [

шлях: "/",
назва: "Comp",
компонент: Comp

];

Ми також можемо вказати кілька маршрутів, розділених комою. Подобається це,

const route = [

шлях: "/",
назва: "Comp",
компонент: Comp
,

шлях: "/ comp2",
назва: "Comp2",
компонент: Comp2

];

Після визначення маршрутів. Передайте масив маршрутів екземплярам маршрутизатора. Отже, давайте також створимо екземпляр маршрутизатора

const router = createRouter (
routes // скорочення від 'routes: routes'
);

Врешті-решт, в основному.js. Ми маємо створити кореневий екземпляр і змонтувати його, а також вводити в нього маршрути, щоб уся програма дізналася про маршрути.

createApp (додаток)
.використання (маршрутизатор)
.mount ("# app");

За допомогою цієї техніки ін’єкції. Ми можемо отримати доступ до маршрутизатора в будь-якому компоненті, використовуючи це.$ маршрутизатор.

Тепер ми можемо програмно просувати маршрути натисканням кнопки або чого завгодно, замість того, щоб використовувати компонент маршрутизатора. Наприклад,

методи:
clickFunc ()
це.$ маршрутизатор.push ('/ about')

Упаковка та резюме

У цій статті ми навчилися встановлювати маршрутизатор Vue різними способами та навчились програмно використовувати маршрутизатор Vue у javascript та у Vue.шаблон JS. Ми також навчилися налаштовувати Vue Router у існуючому проекті в дуже простому та покроковому детальному посібнику. Якщо ви хочете дізнатись більше про Vue Router, відвідайте Vue Router: Official Docs.