Како руковати рутирањем у Вуе-у помоћу Вуе рутера

Вуе Роутер, званични рутер за Вуе, омогућава прављење једностраничких апликација (СПА) у Вуе-у. Вуе Роутер вам омогућава да мапирате компоненте ваше веб апликације на различите руте прегледача, управљате стеком историје ваше апликације и подесите напредне опције рутирања.

Почетак рада са Вуе рутером

Да бисте започели са Вуе рутером, покрените следеће нпм (менаџер пакета чворова) команду у жељеном директоријуму да креирате своју Вуе апликацију:

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')

Увезли сте рутер функција у маин.јс датотеку, а затим натерао вашу Вуе апликацију да користи ову функцију рутера са користити методом.

Затим можете да примените своје руте на своју Вуе апликацију тако што ћете структурирати сличан блок кода оном испод: