Vue Router

Eğer bu url’in “www.example.com/events?page=4” page bilgisine erişmek istiyorsak şu şekilde yazdırabiliriz.

<h1> Page number is {{$route.query.page}} </h1>

veya vue router kütüphanesini kullanarak bu şekilde current page’in bilgisini alabiliriz.

import {computed} from "vue";
import {useRoute} from "vue-router";

const router = useRoute()
const currentPage = computed(() => {parseInt(router.query.page) || 1})

Current page bilgisinin bu şekilde değil de url’de “www.example.com/events/4” olarak yazıldığı durumda ise projemiz içinde oluşturduğumuz router dosyası içerisine

const router = [
    {path: 'events/:page', components: Events}
]

şeklinde tanımlayıp daha sonra da template kısmında kullanabiliriz.

<h1>Page number {{$route.params.page}}</h1>

Bunun dışında props kullanarak da bu page bilgisini kullanacağımız componentlere aktarabiliriz.

const router = [
    {path: 'events/:page', components: Events, props:true}
]

<script>
defineProps(['page'])
</script>
<h1>Page number {{page}}</h1>

Eğer servisten dönen dataları listelediğimiz bir sayfamız varsa bu sayfada dinamik olarak vue router’ı 6 adımda uygulayabiliriz.

1-Servisten gelen dataları aldığımız fonksiyona perPage ve page datalarını eklememiz gerekir. Bunlardan ilki bir sayfada ne kadar data göstereceğimizi diğeri ise o an kaçıncı sayfada olduğumuzu verecek.

 getEvents(perPage,page) {
    return apiClient.get('/events?_limit=' + perPage + '&_page=' + page)
  }

2- Router klasörü içerisindeki index.js de props olarak page bilgisini göndermek. Dataları listelediğiniz componenti hangi obje içinde çağırdıysanız props bilgisini orada tanımlayabilirsiniz.

{
  path: '/',
  name: 'EventList',
  component: EventList,
  props: route => ({ page: parseInt(route.query.page) || 1 })
},

3- Dataları listelemek için yazdığımız dosyada prop bilgisini almak ve networke istek atmak için kullandığımız servise perPage ve page bilgilerini vermek.

import { onMounted, ref, computed, watchEffect } from "vue";

const props = defineProps(['page'])

const events = ref("");

const page = computed(() => props.page)

onMounted(() => {
  watchEffect(() => {
    events.value = null
    EventService.getEvents(2, page.value)
      .then((response) => {
        events.value = response.data;
      })
      .catch((error) => {
        console.log(error);
      });
  })
});

4- Next ve prev buttonlarını componente eklemek.

<template>
  <h1>Events for Good</h1>
  <div class="events">
    <EventCard v-for="event in events" :key="event.id" :event="event" />

    <router-link
      :to="{ name: 'EventList', query: { page: page - 1 } }"
      rel="prev"
      v-if="page != 1"
      >Prev Page</router-link
    >

    <router-link
      :to="{ name: 'EventList', query: { page: page + 1 } }"
      rel="next"
      >Next Page</router-link
    >
  </div>
</template>

5- Next ve prev buttonlarının conditionlarını yazmak.

  <template>
    ....
    <router-link
      :to="{ name: 'EventList', query: { page: page + 1 } }"
      rel="next"
      v-if="hasNextPage"
      >Next Page</router-link
    >
    .....
  </template>

  <script>
  const totalEvents = ref(0)
  const hasNextPage = computed(() => {
    // networkten dönen toplam data sayısını perPage valuesuna bölüyoruz.
    const totalPages = Math.ceil(totalEvents.value / 2)
    return page.value < totalPages  
  })
  
  onMounted(() => {
    watchEffect(() => {
      events.value = null
      EventService.getEvents(2, page.value)
        .then(response => {
          events.value = response.data
          // networkten dönen toplam data sayısını burada elde ettik
          totalEvents.value = response.headers['x-total-count']
        })
        .catch(error => {
          console.log(error)
        })
    })
  })
  </script>

6- Butonlara ait stil dosyalarını düzenlemek.