Vue'da Vue Router yordamida routing qanday tashkil etiladi?

Savol

Vue Router'da marshrutlar qanday aniqlanadi, dinamik parametrlar qanday ishlaydi va navigatsiya guard'lari nima?

Qisqa javob

Vue Router URL'ni routes obyektlar massivi (path, component, ichma-ich children) orqali komponentlarga moslashtiradi. Yo'lning dinamik segmentlari (:id) route.paramsga tushadi va komponentga useRoute() orqali kirish mumkin bo'ladi. Navigatsiya guard'lari (beforeEach — global, beforeEnter — muayyan marshrut uchun) — o'tishdan oldin bajariladigan va navigatsiyani ruxsat etishi, bekor qilishi yoki qayta yo'naltirishi mumkin bo'lgan middleware-funksiyalar.

Batafsil javob

Marshrutlarni aniqlash. Router routes massivi bilan createRouter orqali yaratiladi, bunda har bir marshrut — path (URL shabloni) va component (nima render qilinishi). Ichma-ich marshrutlar children orqali beriladi — bu ichma-ich <router-view> bilan layout'lar qurish imkonini beradi.

Dinamik parametrlar. : bilan boshlanadigan yo'l segmenti — parametr: /users/:id /users/42ga mos keladi va { id: '42' }ni route.paramsga qo'yadi. Komponent ichida parametrlar useRoute().params (Composition API) orqali o'qiladi — bu reaktiv obyekt, ya'ni /users/42dan /users/43ga o'tishda (bir xil komponent qayta ishlatiladi) params.id reaktiv tarzda yangilanadi va buni hisobga olish kerak: bunday o'tishda komponentning lifecycle hook'lari qayta chaqirilmaydi, route.paramsni watch orqali aniq kuzatib borish kerak.

Navigatsiya guard'lari — marshrutlar orasidagi o'tishning turli bosqichlarida chaqiriladigan funksiyalar:

• Global router.beforeEach((to, from) => { ... }) — har bir o'tishdan oldin bajariladi. Odatiy qo'llanilishi — avtorizatsiyani tekshirish: agar foydalanuvchi tizimga kirmagan bo'lsa-yu marshrut avtorizatsiyani talab qilsa, false (o'tishni bekor qilish) yoki redirekt uchun marshrut obyektini ({ name: 'login' }}) qaytarish.
• beforeEnter — o'z ta'rifida muayyan marshrutga bog'langan guard, faqat shu marshrutga kirganda ishga tushadi.
• Shuningdek, komponent darajasidagi guard'lar (onBeforeRouteLeave, onBeforeRouteUpdate Composition API'da) va global beforeResolve/afterEach ham mavjud.

Guard qaytarishi mumkin: true/undefined — o'tishga ruxsat berish, false — bekor qilish, yo'l satri/obyekti — redirekt qilish.

Misol

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import UserView from '../views/UserView.vue'
import LoginView from '../views/LoginView.vue'

const routes = [
  { path: '/', name: 'home', component: HomeView },
  {
    path: '/users/:id',
    name: 'user',
    component: UserView,
    meta: { requiresAuth: true }
  },
  { path: '/login', name: 'login', component: LoginView }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

// global guard: har bir o'tishdan oldin avtorizatsiyani tekshirish
router.beforeEach((to) => {
  const isAuthenticated = Boolean(localStorage.getItem('token'))
  if (to.meta.requiresAuth && !isAuthenticated) {
    return { name: 'login' } // o'tishga ruxsat berish o'rniga redirekt
  }
})

export default router

<!-- UserView.vue: dinamik parametrni o'qish -->
<script setup>
import { watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

// /users/1 -> /users/2 ga o'tishda komponent qayta ishlatiladi,
// shuning uchun parametrni watch orqali kuzatish kerak
watch(() => route.params.id, (id) => {
  console.log('Foydalanuvchi yuklanmoqda:', id)
}, { immediate: true })
</script>

<template>
  <p>Foydalanuvchi ID: {{ route.params.id }}</p>
</template>

Qo'shimcha savollar

• Nega bir xil komponentga ega marshrutlar orasida o'tishda lifecycle hook'lar qayta chaqirilmaydi?
• createWebHistory createWebHashHistorydan nimasi bilan farq qiladi?
• Marshrut komponentlarini lazy loading qilish qanday tashkil etiladi (component: () => import(...))?