Vue marshrutlash (routing)

Dinamik komponent yordamida navigatsiya

Vue-da marshrutlashni tushunish uchun avvalo ikkita komponent o‘rtasida almashish uchun dinamik komponentdan foydalanadigan dasturni ko‘rib chiqaylik.

Biz tugmalar yordamida komponentlar o‘rtasida almashishimiz mumkin:

<template>
    <h1>Food!</h1>
    <p>I like most types of food.</p>
</template>

<template>
    <h1>Animals!</h1>
    <p>I want to learn about at least one new animal every year.</p>
</template>

<template>
  <p>Choose what part of this page you want to see:</p>
  <button @click="activeComp = 'animal-collection'">Animals</button>
  <button @click="activeComp = 'food-items'">Food</button><br>
  <div>
    <component :is="activeComp"></component>
  </div>
</template>

<script>
export default {
  data() {
      return {
        activeComp: ''
      }
    }
}
</script>

<style scoped>
  button {
    padding: 5px;
    margin: 10px;
  }
  div {
    border: dashed black 1px;
    padding: 20px;
    margin: 10px;
    display: inline-block;
  }
</style>

Dinamik komponentdan marshrutlashgacha

Biz Vue bilan SPA (Yagona sahifali ilovalar) yaratamiz, ya’ni bizning ilovamiz faqat bitta *.html faylini o‘z ichiga oladi. Bu shuni anglatadiki, biz odamlarni boshqa *.html fayllarga yo‘naltira olmaymiz va ularga sahifamizda turli xil kontentni ko‘rsata olmaymiz.

Yuqoridagi misolda biz sahifadagi turli tarkiblar orasida harakat qilishimiz mumkin, lekin biz boshqa birovga sahifaga manzil bera olmaymiz, shunda ular to‘g‘ridan-to‘g‘ri oziq-ovqat haqida bo‘limga kirishadi, lekin marshrutlash orqali biz buni qila olamiz.

Marshrut to‘g‘ri sozlangan bo‘lsa, Vue ilovasini URL manziliga kengaytmali ochsangiz, masalan, "/food-items" kabi, siz to‘g‘ridan-to‘g‘ri oziq-ovqat tarkibiga kirasiz.

Vue Router kutubxonasini o‘rnating

Mashinangizda Vue-da marshrutlashdan foydalanish uchun terminaldan foydalanib loyiha papkangizga Vue Router kutubxonasini o‘rnating:

main.js-ni yangilang

Marshrutlashdan foydalanish uchun biz router yaratishimiz kerak va buni main.js faylida qilamiz.

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'

import App from './App.vue'
import FoodItems from './components/FoodItems.vue'
import AnimalCollection from './components/AnimalCollection.vue'

const router = createRouter({
    history: createWebHistory(),
    routes: [
        { path: '/animals', component: AnimalCollection },
        { path: '/food', component: FoodItems },
    ]
});

const app = createApp(App)

app.use(router);
app.component('food-items', FoodItems);
app.component('animal-collection', AnimalCollection);

app.mount('#app')

Endi biz, masalan, original URL manzilining oxiriga “/hayvanlar” qo‘shilsa, “AnimalCollection” komponentini ochishi mumkin bo‘lgan marshrutizator yaratdik, biroq u <router-view> komponentini qo‘shganimizda keyingi bo‘limgacha ishlamaydi. Router, shuningdek, veb-tarixni kuzatib boradi, shunda siz odatda URL yonidagi veb-brauzerning yuqori chap burchagida joylashgan o‘qlar yordamida tarixda oldinga va orqaga qaytishingiz mumkin.

komponentidan foydalaning

Bizning sahifamizdagi tarkibni yangi yo‘riqnoma bilan o‘zgartirish uchun biz oldingi misoldagi dinamik komponentni olib tashlashimiz va uning o‘rniga <router-view> komponentidan foydalanishimiz kerak.

<template>
  <p>Choose what part of this page you want to see:</p>
  <button @click="activeComp = 'animal-collection'">Animals</button>
  <button @click="activeComp = 'food-items'">Food</button><br>
  <div>
    <router-view></router-view>
    <component :is="activeComp"></component>
  </div>
</template>

Agar siz kompyuteringizda yuqoridagi o‘zgarishlarni amalga oshirgan bo‘lsangiz, brauzerdagi loyiha sahifangizning URL manziliga "/food" ni qo‘shishingiz mumkin va sahifa oziq-ovqat tarkibini ko‘rsatish uchun yangilanishi kerak, masalan:

komponentidan foydalaning

Biz tugmalarni <router-link> komponenti bilan almashtirishimiz mumkin, chunki u router bilan yaxshiroq ishlaydi.

Biz endi "activeComp" ma’lumotlar xususiyatiga muhtoj emasmiz, shuning uchun biz uni o‘chirib tashlashimiz mumkin va biz <script> yorlig‘ini butunlay o‘chirib tashlashimiz mumkin, chunki u bo‘sh.

<template>
  <p>Choose what part of this page you want to see:</p>
  <router-link to="/animals">Animals</router-link>
  <router-link to="/food">Food</router-link><br>
  <div>
    <router-view></router-view>
  </div>
</template>

<script></script>

komponentiga uslub

<router-link> komponenti <a> tegiga ko‘rsatiladi. Brauzerdagi elementni sichqonchaning o‘ng tugmasi bilan bosib, tekshirib ko‘rsak, buni ko‘rishimiz mumkin:

Yuqoridagi skrinshotda ko‘rib turganingizdek, Vue qaysi komponent faol ekanligini ham kuzatib boradi va faol <router-link> komponentiga “router-link-active” classini taqdim etadi (bu endi <a> tegiga ko‘rsatiladi).

Yuqoridagi ma’lumotlardan qaysi <router-link> komponent faol ekanligini ta’kidlash uchun uslub berishimiz mumkin:

<template>
  <p>Choose what part of this page you want to see:</p>
  <router-link to="/animals">Animals</router-link>
  <router-link to="/food">Food</router-link><br>
  <div>
    <router-view></router-view>
  </div>
</template>

<style scoped>
  a {
    display: inline-block;
    background-color: black;
    border: solid 1px black;
    color: white;
    padding: 5px;
    margin: 10px;
  }
  a:hover,
  a.router-link-active {
    background-color: rgb(110, 79, 13);
  }
  div {
    border: dashed black 1px;
    padding: 20px;
    margin: 10px;
    display: inline-block;
  }
</style>

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'

import App from './App.vue'
import FishTypes from './components/FishTypes.vue'

const router = createRouter({
    history: createWebHistory(),
    routes: [
        { : '/fish', : FishTypes }
    ]
});

const app = createApp(App)
app.use(router);
app.mount('#app')