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. Създадохме опростена навигация, използвайки компоненти на рутер-връзка и предоставяме връзката, използвайки подпората, наречена „до“. Връзката на маршрутизатора работи по същия начин като котва "a" таг. По подразбиране той се изобразява като таг 'a'. В изгледа на рутера ще имаме относителния компонент, който съответства на маршрута.

В javascript първо трябва да регистрираме и импортираме компонентите, за да дефинираме техните маршрути. Предполагаме, че имаме компонент на име Comp.vue в директорията на изгледите, в която ще импортираме в индекса на рутера.js в директорията на рутера и го дефинирайте като маршрут.

За да импортираме компонент, използваме следния израз

импортиране на Comp от "... / views / Comp.vue ";

След импортирането трябва да дефинираме маршрута сега и да го съпоставим с компонента. Като този,

const маршрути = [

път: "/",
име: "Comp",
компонент: Comp

];

Можем да дадем и множество маршрути, разделени със запетая. Като този,

const маршрути = [

път: "/",
име: "Comp",
компонент: Comp
,

път: "/ comp2",
име: "Comp2",
компонент: Comp2

];

След определяне на маршрутите. Предайте масива от маршрути на екземплярите на рутера. Така че, нека създадем и екземпляр на рутера

const router = createRouter (
маршрути // съкращение от „маршрути: маршрути“
);

В крайна сметка, в главното.js файл. Трябва да създадем екземпляра на root и да го монтираме и да инжектираме маршрутите в него, така че цялото приложение да узнае за маршрутите.

createApp (приложение)
.използване (рутер)
.монтиране ("# app");

Чрез използването на тази инжекционна техника. Можем да получим достъп до рутера във всеки компонент, използвайки това.$ рутер.

Вече можем програмно да натискаме маршрути с едно щракване на бутон или каквото пожелаете, вместо да използваме компонента link-router. Например,

методи:
clickFunc ()
това.$ рутер.натиснете ('/ about')

Опаковане и обобщение

В тази статия се научихме да инсталираме Vue Router по различни начини и се научихме да използваме Vue рутера програмно в javascript и в Vue.js шаблон. Също така се научихме да настройваме Vue Router в съществуващ проект в много лесно и подробно ръководство стъпка по стъпка. Ако искате да научите повече за Vue Router, моля посетете Vue Router: Official Docs.