Curso Vue.js

# Router

# Paginación

# Configuración

# router > index.js

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

# servicios > ServiciosProductos.js

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

# view > ListaProductos.vue

props: ['page'],

ServiciosProductos.obtenerProductos(2, this.page)

# Activando la paginación

# view > ListaProductos.vue

<div class="d-flex justify-content-center">
  <div class="paginacion">
    <router-link
      id="page-prev"
      :to="{ name: 'ListaProductos', query: { page: page - 1 } }"
      rel="prev"
      v-if="page != 1"
      >&#60; Previous</router-link
    >

    <router-link
      id="page-next"
      :to="{ name: 'ListaProductos', query: { page: page + 1 } }"
      rel="next"
      v-if="totalPaginasSiguientes"
      >Next &#62;</router-link
    >
  </div>
</div>

import { watchEffect } from 'vue'

totalProductos: 0

created() {
  watchEffect(() => {
    this.productos = null;
    ServiciosProductos.obtenerProductos(2, this.page)
      .then((response) => {
        this.productos = response.data;
        this.totalProductos = response.headers["x-total-count"];
      })
      .catch((error) => {
        console.log(error);
      });
  });
},

computed: {
  totalPaginasSiguientes() {
    var totalPaginas = Math.ceil(this.totalProductos / 2);

    return this.page < totalPaginas;
  },
},

<style>
.paginacion {
  display: flex;
  width: 290px;
}
.paginacion a {
  flex: 1;
  text-decoration: none;
  color: #2c3e50;
}
</style>

# Rutas anidadas

# Redirecciones y Alias