Керівництво по Vue Router

Вступ

Під час розробки веб-програм за допомогою Vue.js, якщо ви не створюєте a Односторінкова програма (SPA), ви захочете підключити кілька сторінок до цільової сторінки, щоб дозволити користувачам переходити ними. Це відомо як Маршрутизація.

Маршрутизація – це процес, за допомогою якого користувач переходить на різні сторінки веб-сайту. Vue.js — це фреймворк JavaScript, який використовується для створення односторінкових програм, що означає, що ця програма завантажується лише один раз із сервера в браузер, і браузеру не потрібно перезавантажувати під час маршрутизації; замість цього він просто запитує ці сторінки, і вони завантажуються.

У цьому посібнику ми навчимося робити маршрутизацію за допомогою Vue.js і детально зануримося в різні типи маршрутизації, які можна зробити, і як їх можна зробити.

Приступаючи до роботи

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

Налаштуйте маршрутизатор Vue в існуючому проекті

Інтеграція vue-router в існуючий проект може бути технічним, і ми зараз розглянемо ці деталі. Першим кроком буде встановлення пакета маршрутизатора vue за допомогою такої команди:

! npm install vue-router@4

Після встановлення перейдіть до src папку та створіть папку під назвою router, а потім файл під назвою index.js в router папку, яка слугуватиме конфігураційним файлом маршрутизатора. наш src тепер каталог матиме такий вигляд:

У index.js файл, переконайтеся, що ми вставили код нижче, який є кодом конфігурації маршрутизатора:

import { createRouter, createWebHashHistory } from 'vue-router'
import HomePage from '../views/HomePage.vue' const routes = [ { path: '/', name: 'home', component: HomePage },
] const router = createRouter({ history: createWebHashHistory(), routes
})
export default router

У нас є routes масив, який містить один об’єкт, який може бути кількома об’єктами, де кожен об’єкт представляє окремий маршрут. На даний момент ми створили лише той, який буде перенаправляти на компонент домашньої сторінки.

Кожен з них routes об'єктів, як правило, складається з path, який є URL-шляхом відносно кореня сайту, the name, який служить ідентифікатором, і component, який ми імпортували у верхній частині сторінки.

Окрім масиву маршрутів, ми встановлюємо екземпляр маршрутизатора внизу, створивши a createRouter() функції та проходження в history ключові цінності та routes масив, а потім ми експортуємо router екземпляр для використання в нашій програмі.

Щоб використовувати цю конфігурацію маршрутизатора в нашій програмі, відкрийте main.js файл у файлі src папка import router from "./router", а потім додайте .use(router) між createApp(App) та .mount('#app') як показано нижче:

import router from './router' createApp(App).use(router).mount('#app')

це vue-router було глобально налаштовано в нашій програмі, і наступним кроком є ​​використання її в нашій програмі. Це легко досягається шляхом включення <router-view /> в App.js тег шаблону, який відображає лише відповідний маршрут:

<!--App.vue -->
<template>
<!-- Any code placed here is going to be fixed -->
<!-- This will only show the page that matches the selected route --> <router-view /> <!-- Any code placed here is going to be fixed -->
</template> <script> export default { name: 'App', }
</script>

Налаштування маршрутів у Vue.js

Маршрути зазвичай створюються в router/index.js масив маршрутів файлу, і ці маршрути підключаються до компонентів. Рекомендується створити папку переглядів, де зберігатимуться всі перегляди сторінок. Наприклад:

Тепер ми знаємо, як налаштувати маршрути вручну.

Встановіть Vue Router за допомогою Vue CLI

Якщо ми збираємося створити новий проект і віримо, що ми скористаємося ним vue-router, це легше зробити під час створення проекту.

Усе, що нам потрібно зробити, це використати Vue CLI, щоб інсталювати найновішу версію vue-router під час ручного вибору функцій у процесі створення нашого проекту:

Прочитайте та дізнайтеся більше про створення проекту Vue.js через наш Керівництво по Vue CLI!

Відкладене завантаження маршрутів за допомогою Vue Router

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

Зазвичай це виконується у файлі конфігурації маршрутизатора шляхом видалення import оператор у верхній частині та замінити його оператором динамічного імпорту в опції компонента нашого маршруту:

import { createRouter, createWebHashHistory } from 'vue-router';
const routes = [ { path: '/', name: 'home', component: () => import(/* webpackChunkName: "home" */ '../views/HomePage.vue'), }, { path: '/about', name: 'about', component: () => import(/* webpackChunkName: "about" */ '../views/AboutPage.vue'), },
];
const router = createRouter({ history: createWebHashHistory(), routes,
});
export default router;

Навігація між маршрутами за допомогою

Наразі ми могли створювати маршрути, але як нам орієнтуватися в нашій програмі? Ми використовуємо <router-link> тег замість <a> елемент у HTML для обробки маршрутизації.

Наприклад, якщо ми хочемо створити панель навігації у верхній частині нашої програми, ми можемо зробити це в App.js файл над <router-view/> щоб він показувався на всіх маршрутах:

<nav> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link>
</nav>

Посилання маршрутизатора приймає to='path' атрибут, який спрямовує користувача до шляху компонента, встановленого під час налаштування маршруту. Це працює як href='path``' атрибут у HTML.

Використання іменованих маршрутів

Використання іменованих маршрутів дозволяє нам проходити в name ключ, який має доступ до name властивість, яку ми встановлюємо під час налаштування маршрутів замість використання шляху, прив’язуючи дані таким чином:

<router-link :to="{ name: 'About' }">About</router-link>

Однією з переваг використання цього методу є те, що у випадку, якщо ми вирішимо змінити шлях маршруту для наших великих програм, нам не потрібно починати змінювати шляхи всіх посилань, що може бути громіздким.

Динамічна маршрутизація

Можуть виникнути ситуації, які вимагають використання динамічної маршрутизації, щоб уникнути непотрібного повторення сторінок. Наприклад, припустімо, що у нас є список фруктів, і ми хочемо, щоб користувач міг натиснути на певний фрукт, і лише деталі про цей фрукт відображалися на сторінці з інформацією про фрукти. У цьому випадку ми використовуємо динамічну маршрутизацію.

У нас було б дві сторінки – одна для демонстрації фруктів у списку, а друга – для відображення деталей кожного фрукта, яка є сторінкою «креслення», яка заповнюється деталями фруктів. Ми створимо сторінки в папці Vue, а потім додамо маршрути до routes масив:

import FruitsPage from '../views/FruitsPage.vue';
import FruitDetails from '../views/FruitDetails.vue'; const routes = [ { path: '/fruits', name: 'Fruits', component: FruitsPage, }, { path: '/fruits/:id', name: 'FruitDetails', component: FruitDetails, },
];

Зауважимо, що для FruitDetails ми додали динамічний id власність, тому вона отримує id параметр і використовує його для запиту конкретних даних, які відображаються на цій сторінці за допомогою $route.params у нашому шаблоні, таким чином роблячи маршрут динамічним.

У FruitsPage, припустімо, що у нас є масив фруктів, які ми зациклюємо на нашій програмі, ми можемо обернути кожен фрукт посиланням поруч із параметрами таким чином:

<!-- FruitsPage.vue --> <template> <h1>Fruits page</h1> <div :key="fruit.id" v-for="fruit in fruits"> // dynamic linking by attaching the id as params <router-link :to="{ name: 'FruitDetails', params: { id: fruit.id } }"> <h3>{{ fruit.name }}</h3> </router-link> </div>
</template> <script> export default { data() { return { fruits: [ { id: 1, name: 'Apple', description: "Apples are an incredibly nutritious fruit.", }, { id: 2, name: 'Mango', description: 'A mango is an edible stone fruit produced by the tropical.', }, { id: 3, name: 'Banana', description: 'A banana is an elongated, edible fruit of the genus Musa.', }, ], }; }, };
</script>

У цей момент, коли користувач клацає кожен фрукт, він переносить їх до FruitDetails сторінку, де ми можемо отримати доступ до id і використовуйте його, щоб визначити, які дані про фрукти мають відображатися в FruitDetails стр.

Доступ до параметрів маршруту

Поки що ми бачили, як динамічно передавати параметри на певну сторінку, тепер давайте подивимося, як ми можемо отримати доступ до цього параметра в нашій FruitDetails сторінки. Ми можемо отримати доступ до параметрів у Vue двома способами – через $route.params або використання реквізиту:

використання $route.params

Параметри доступні безпосередньо через $route.params:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ $route.params.id }}</p>
</template>

Або ми можемо отримати доступ до нього в межах нашого data() використання методу this:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p>
</template> <script> export default { data() { return { id: this.$route.params.id, }; }, };
</script>

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

Ще один простий спосіб динамічного доступу до даних за допомогою маршрутів — використання пропсів. Спочатку ми повинні встановити props до true в об’єкті конфігурації маршрутів:

{ path: '/fruits/:id', name: 'FruitDetails', component: FruitDetails, props: true,
},

Таким чином, все, що нам потрібно зробити далі, це додати props варіант для script тег, а потім скористайтеся реквізитами в нашому template тег:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p>
</template> <script> export default { props: ['id'], };
</script>

Помилки 404 – маршрут не знайдено

У випадку, якщо користувач переходить до неіснуючого маршруту, Vue завантажить сторінку, але без жодних компонентів, створюючи порожню сторінку. У цьому випадку найкраще відобразити сторінку 404 із, можливо, кнопкою, яка веде їх на домашню сторінку або туди, куди, на нашу думку, вони хотіли б піти.

Це легко вирішити, створивши компонент для нашої сторінки 404, а потім додавши маршрут 404 до масиву маршрутів файлу конфігурації маршрутизатора, але цього разу ми використаємо регулярний вираз, щоб перехопити всі маршрути, які не були оголошені раніше:

{ path: '/:catchAll(.*)', name: 'ErrorPage', component: ErrorPage,
}

Команда :catchAll це динамічний сегмент, який отримує регулярний вираз (.*) у якому Vue Router перевіряє, чи визначено маршрут, до якого переходить користувач, у файлі конфігурації нашого маршрутизатора. Якщо таких маршрутів не існує, користувач направляється до компонента, яким у нашому випадку є ErrorPage компонент:

<template> <h2>404 Page</h2> <p>This is a 404 page</p> <p>Visit home page <router-link to="/">here</router-link></p>
</template>

Переадресації

У ситуації, коли ми хочемо, щоб користувачі були перенаправлені, коли вони відвідують певний маршрут, наприклад, якщо у нас був попередній маршрут, який ми більше не використовуємо, ми хочемо, щоб користувачі були перенаправлені на новий, коли вони відвідують цей маршрут. Це легко зробити, додавши новий об’єкт до нашого масиву конфігурації маршрутів із a redirect поле:

{ path: '/fruits', name: 'Fruits', component: FruitsPage,
},
{ path: '/all-frults', redirect: '/fruits',
},

Усе, що наведено вище, полягає в тому, що якщо користувач відвідує, шлях /all-fruits, це перенаправить їх до /fruits маршруту.

Програмна навігація

Наразі ми багато дізналися про маршрутизацію, але є ще одна річ, яку ви захочете знати: як здійснювати програмну навігацію. Ми визначаємо програмну навігацію як ситуацію, у якій користувача переспрямовують/спрямовують на основі певної дії, що відбувається на маршруті, як-от дії входу чи реєстрації, або натискання певної кнопки, наприклад кнопки «повернутися».

Історія маршрутизатора

Ми можемо використовувати історію браузера для легкої навігації назад або вперед, залежно від наших уподобань. Якщо ви пам'ятаєте, у нас є createRouter() у файлі конфігурації маршрутизатора, де ми встановили a history значення, що дозволяє маршрутизатору Vue відстежувати історію нашого маршрутизатора під час маршруту через веб-програму.

Це дозволяє нам переглядати історію веб-переглядача на основі умови, наприклад натискання кнопки:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p> <button @click="goBack">Go Back</button>
</template> <script> export default { props: ['id'], methods:{ goBack(){ this.$router.go(-1) } } };
</script>

Ми також можемо вирішити йти вперед, використовуючи 1 замість -1 і припустимо, що ми хочемо просунутися на 2 кроки, які ми можемо використати 2 or -2.

Штовхати

push() зазвичай використовується після виконання дії та додає новий запис до стека історії. Наприклад, якщо користувач успішно ввійшов, ми хотіли б, щоб його перейшли на сторінку інформаційної панелі програмним шляхом. Це досягається шляхом додавання методу push поряд із назвою маршруту:

this.$router.push({ name: 'Dashboard' });

Висновок

Маршрутизація є однією з основних функцій Vue. Якщо ви не будуєте a Односторінкова програма (SPA), ви захочете підключити кілька сторінок до цільової сторінки, щоб дозволити користувачам переходити ними.

У цьому посібнику ми розглянули, що таке маршрутизація, як можна встановити vue-router у нових і існуючих проектах, як виконувати відкладене завантаження, навігацію між маршрутами, виконання динамічної маршрутизації, доступ до параметрів маршруту та виконання програмної навігації.

• Coinsmart. Найкраща в Європі біржа біткойн та криптовалют.
• Платоблокчейн. Web3 Metaverse Intelligence. Розширені знання. БЕЗКОШТОВНИЙ ДОСТУП.
• CryptoHawk. Альткойн Радар. Безкоштовне випробування.
• Джерело: https://stackabuse.com/guide-to-vue-router/