Вуе Роутер, званични рутер за Вуе, омогућава прављење једностраничких апликација (СПА) у Вуе-у. Вуе Роутер вам омогућава да мапирате компоненте ваше веб апликације на различите руте прегледача, управљате стеком историје ваше апликације и подесите напредне опције рутирања.
Преглед садржаја
Почетак рада са Вуе рутером
Да бисте започели са Вуе рутером, покрените следећу команду нпм (Ноде Пацкаге Манагер) у жељеном директоријуму да бисте креирали своју Вуе апликацију:
npm create vue
Када будете упитани да ли да додате Вуе рутер за развој апликације на једној страници, изаберите Да.
Затим отворите свој пројекат у жељеном уређивачу текста. Срц директоријум ваше апликације треба да садржи фасциклу рутера.
Фасцикла рутера садржи датотеку индек.јс која садржи ЈаваСцрипт код за руковање рутама у вашој апликацији. Датотека индек.јс увози две функције из пакета вуе-роутер: цреатеРоутер и цреатеВебХистори.
Функција цреатеРоутер креира нову конфигурацију руте од објекта. Овај објекат садржи кључеве историје и руте и њихове вредности. Кључ руте је низ објеката који детаљно описују конфигурацију сваке руте, као што се види на горњој слици.
Након што конфигуришете своје руте, потребно је да извезете ову инстанцу рутера и увезете ову инстанцу у датотеку маин.јс:
import './assets/main.css'import { createApp } from 'vue'
import App from './App.vue'
import router from './router'const app = createApp(App)
app.use(router)
app.mount('#app')
Увезли сте функцију рутера у датотеку маин.јс, а затим натерали своју Вуе апликацију да користи ову функцију рутера помоћу методе коришћења.
Затим можете да примените своје руте на своју Вуе апликацију тако што ћете структурирати сличан блок кода оном испод:
<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script><template>
<header>
<nav>
<RouterLink to="https://www.makeuseof.com/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
</nav>
</header><RouterView />
</template>
Горњи блок кода показује употребу Вуе рутера у компоненти Вуе. Исечак кода увози две компоненте из библиотеке вуе-роутер: РоутерЛинк и РоутерВиев.
Компоненте РоутерЛинк-а креирају везе до почетне странице и страница о информацијама у горњем исечку кода. Атрибут то одређује путању до руте којом се крећете када кликнете на везу. Овде имате једну везу која показује на основну руту (“/”) и другу везу која показује на руту “/абоут”.
Компонента приказује компоненту повезану са тренутном рутом. Делује као чувар места где ће се приказати садржај тренутне руте. Када се крећете до друге руте, компонента повезана са том рутом ће се приказати унутар компоненте.
Додавање параметара рутама ваше апликације
Вуе Роутер вам омогућава да проследите параметре и упите рутама. Параметри су динамички делови УРЛ-а, означени двотачком „:“.
Да бисте подесили Вуе рутер да може да снима параметре у рутама апликације, конфигуришите конкретну руту у датотеци индек.јс:
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: "https://www.makeuseof.com/",
name: "home",
component: HomeView,
},
{
path: "/developer/:profileNumber",
name: "developer",
component: () => import("../views/devView.vue"),
},
],
});
Горњи блок кода приказује инстанцу рутера са две руте: хоме и девелопер. Рута програмера приказује информације о одређеном програмеру на основу броја профила програмера.
Сада измените датотеку Апп.вуе тако да изгледа као исечак кода испод:
<script setup>
import { ref } from "vue";
import { RouterLink, RouterView } from "vue-router";const developer = ref([
{
name: "Chinedu",
profile: 2110,
},
]);
</script><template>
<header>
<nav>
<RouterLink to="https://www.makeuseof.com/">Home</RouterLink>
<RouterLink :to="{ path: `/developer/${developer.profile}` }">
Dev Profile
</RouterLink>
</nav>
</header><RouterView />
</template>
Горњи блок кода поставља променљиву програмера као реактивни објекат са два својства: именом и профилом. Затим, друга компонента РоутерЛинк усмерава се на компоненту девВиев. Сада можете приступити вредности параметра који проследите у УРЛ у блоку шаблона или ЈаваСцрипт блоку компоненте девВиев.
Да би приступио овој вредности у блоку шаблона компоненте девВиев, Вуе обезбеђује метод $роуте, објекат који садржи својства која детаљно наводе информације о УРЛ адреси. Ове информације укључују пуну путању, упите, параметре и компоненте.
Ево примера како да приступите профилу одређеног програмера у компоненти девВиев помоћу методе $роуте:
<template>
<div>
<h1>This is developer {{ $route.params.profileNumber }} about page</h1>
</div>
</template>
Горњи исечак кода показује како да користите метод $роуте за приступ и приказ вредности параметра профилеНумбер у оквиру шаблона компоненте.
Својство парамс у методи $роуте садржи параметре које дефинишете у рути. Када Вуе рендерује ову компоненту, он замењује вредност $роуте.парамс.профилеНумбер стварном вредношћу коју проследите у УРЛ-у.
На пример, ако посетите /девелопер/123, приказана порука је „Ово је страница за програмер 123“.
Такође можете приступити информацијама о рути у ЈаваСцрипт блоку ваше компоненте. На пример:
<script setup>
import { useRoute } from "vue-router";const route = useRoute();
</script><template>
<div>
<h1>This is developer {{ route.params.profileNumber }} about page</h1>
</div>
</template>
У претходном блоку кода, приступили сте $роуте објекту директно унутар шаблона да бисте преузели параметре руте. Међутим, у ажурираном блоку кода увезли сте функцију усеРоуте() из пакета вуе-роутер. Доделили сте функцију променљивој коју сте затим користили у шаблону ваше Вуе компоненте.
Са усеРоуте(), пратите приступ АПИ-ја композиције Вуе 3 користећи систем реактивности. Ово осигурава да ће се компонента аутоматски ажурирати када се параметри руте промене.
Додавање упита на руте ваше апликације
Упити или стрингови упита су опциони параметри који се додају УРЛ-у после знака питања „?”. На пример, у рути „/сеарцх?наме=вуе“, „наме=вуе“ је стринг упита где је име кључ, а вуе вредност.
Да бисте додали упит рути у Вуе Роутер-у, можете користити својство упита објекта то у компоненти РоутерЛинк. Својство упита треба да буде објекат где сваки пар кључ-вредност представља параметар упита. Ево примера:
<RouterLink :to="{ name: 'home', query: {name: 'vue'}}">Home</RouterLink>
Након што додате упит у руту, можете приступити параметрима упита у вашим Вуе компонентама. Ово можете да урадите са $роуте објектом или функцијом усеРоуте, слично додавању параметара руте.
Ево примера како користите параметар упита у компоненти:
<template>
{{ $route.query.name }}
</template>
Овај исечак кода показује како да приступите и прикажете вредност параметра упита (име) са УРЛ-а користећи објекат $роуте.куери у оквиру шаблона компоненте Вуе.јс.
Дефинисање резервне (404) странице
Вуе Роутер вам омогућава да дефинишете резервну руту која ће се подударати када ниједна друга рута не одговара УРЛ адреси. Ово је корисно за приказивање странице „404 није пронађено“.
Ево како можете да дефинишете резервну руту помоћу Вуе рутера:
{
path:'/:pathName(.*)',
name: 'NotFound',
component: () => import('../views/NotFoundView.vue')
}
Део /:патхНаме означава динамички сегмент у УРЛ-у, а (.*) је ЈаваСцрипт регуларни израз који одговара свим знаковима после динамичког сегмента. Ово омогућава рути да одговара било којој путањи.
Када корисник дође до УРЛ адресе која се не подудара ни са једном другом рутом, Вуе ће приказати компоненту НотФоундВиев. Овај приступ користите за руковање грешкама 404 или за приказ резервне странице када тражена рута није пронађена.
Научите да креирате анимације у Вуе-у
Научили сте како да додате параметре и упите рутама ваше апликације. Такође сте научили како да дефинишете резервну страницу за обраду 404 грешака. Вуе Роутер пружа много више функционалности, као што је постављање динамичких и угнежђених рута.
Додавање анимација и прелаза између елемената на веб страници може значајно побољшати корисничко искуство. Морате да научите да креирате прелазе и анимације у Вуе-у да бисте направили глаткију, привлачнију и уопштено бољу веб локацију.