Saltar a contenido

Rutas con Vue Router

El manejo de rutas en nuestro proyecto reactivo de momento es inexistente. Para solucionar este problema, debemos hacer uso de Vue Router. Comenzamos con su instalación:

npm install vue-router

Crear ruteo

Para definir las rutas de nuestro proyecto, lo ideal es hacerlo en un fichero aparte. Para facilitar su ubicación, lo crearemos en resources\js\vue\router.js. De este modo, seguimos una lógica en la estructura de ficheros que nos facilitará encontrarlo.

Vamos a definir, a modo de ejemplo, una ruta para el listado de post.

route.js
import { createRouter, createWebHistory } from "vue-router";

import List from './components/ListComponent.vue'

const routes = [
    {
        name: 'list',
        path: '/vue',
        component: List
    },
]

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

export default router
Como puedes ver, cargamos un par de funciones, una para crear el componente de rutas, llamada createRouter() que recibe como parámetros:

  1. El tipo de modo histórico, el recomendado createWebHistory() que hace que el ruteo se vea normal en la URL, pero, también puedes usar el de en base a hash con createWebHashHistory()
  2. Las rutas.

La definición de las rutas que usamos pasa por definir:

  • El nombre del componente (name).
  • La ruta, para indicar la URI (path).
  • El componente de Vue (component).

Una vez que tenemos nuestro fichero de rutas listo, sólo quedaría importarlo en el fichero de inicializción de nuestro proyecto, main.js, y aplicarlo a nuestra aplicación.

main.js
import { createApp } from "vue";

// Estilos personalizados de tu proyecto
import '../../css/vue.css'

import axios from "axios";
import App from "./App.vue"

import router from './router'

const app = createApp(App)

app.use(router)

// Configuración global de Axios
app.config.globalProperties.$axios = axios
window.axios = axio

app.mount("#app")

Ahora, necesitamos definir en el componente padre, el componente de router-view que es el nombre del componente que va a renderizar el componente cuando haga match entre la URL al momento de navegar y la URI definida en el router.js

App.vue
<template lang="">
    <div>
        <router-view></router-view>
    </div>
</template>

Que gracias al sistema de rutas ya nos carga el componente que nosotros le hemos indicado.

Crear enlaces

Una vez que tengamos claro la manera en la que funcionan las rutas, vamos a hacer uso de ellas. Los enlaces se hacen a través del elemento router-link que evalúa la información que nosotros le pasamos a la hora de renderizarlo. Para este ejemplo, consideramos que hay un enlace a crear post, llamado create:

<router-link :to="{ name:'create' }">Create</router-link>

A la hora de crear enlaces, también podemos pasar parámetros o darle estilos, en el fondo no deja de ser más que una etiqueta HTML que se renderiza y es entendible por el cliente:

<router-link class="mr-3" :to="{ name: 'save', params: { 'id': p.row.id } }">Edit</router-link>

Parámetros opcionales para la ruta de Vue en Laravel

Una de las problemáticas que nos encontramos con la mezcla de los dos tipos de rutas, Laravel y Vue, es que pueden darnos errores 404 si ingresamos directamente a direcciones propias de Vue al no tener conocimiento Laravel de ellas. Una manera de solucionar esto, es la de crear las rutas con parámetros opcionales. Para solucionar esto, deberemos editar el fichero web.php

<?php

use Illuminate\Support\Facades\Route;

Route::get('/vue/{n1?}/{n2?}/{n3?}', function () {
    return view('vue');
});

De este modo, le indicamos la cantidad de parámetros opcionales (o partes de la url) que puede tener nuestro proyecto reactivo. Esto hará que Laravel sea consciente de que esas rutas no están mal y se gestionarán desde la parte del proyecto de Vue.

Manejo avanzado de rutas en Vue

Está claro que siempre hay que tener lo más localizado posible las rutas que vamos a utilizar en nuestro proyecto reactivo. Estas deberían estar en un fichero que nos permita editar y cambiarlas de una manera ágil y eficaz.

Ese fichero es App.vue, nuestro fichero principal:

<script>
export default {
    data() {
        return {
            urls: {
                postUpload:'/api/post/upload/',
                postPaginate:'/api/post/',
                postPatch:'/api/post/',
                postPost:'/api/post/',
                postDelete:'/api/post/',
                getPostBySlug:'/api/post/slug/',
                getCategoriesAll:'/api/category/all',
            }
        }
    },
}
</script>
Para hacer uso de estas rutas, debemos hacer uso de una variable especial, $root, que es donde precisamente debemos tener nuestro fichero. Un ejemplo de uso sería:

 this.$axios.post(this.$root.urls.postPost, this.form).then(res => {})

El uso exacto del ejemplo lo veremos más adelante, pero fíjate en la manera en la que introducimos la ruta. Por propósitos educativos nosotros no usaremos esta manera de trabajar aunque es más que recomendable en un entorno profesional.

Actividad

  • 🧪 PR 906. (RA9 / CE9a CE9b CE9c CE9d CE9e CE9h / IC2 / 5p) - Genera las rutas para poder consumir la API en el proyecto de las notas.