2. Laravel 8 con auth ui y VUE.js 3 - Vue-Router

Inicio
Anterior
1
Siguiente
Final

luispindola
Autor del tema
Fuera de línea
Administrador

Más

1 año 6 meses antes - 1 año 5 meses antes #42 por luispindola

2. Laravel 8 con auth ui y VUE.js 3 - Vue-Router Publicado por luispindola

Este tema es continuación de:
Laravel 8 con auth ui y VUE.js 3

1. Creamos un componente de vue nuevo en la carpeta app/resources/js/components/ creamos el archivo: FormLibro.vue inicialmente con el siguiente código:
FormLibro.vue

<template>
	<div class="card">
    	        <div class="card-header">{{ titulo }}</div>
		<div class="card-body">

		</div>
	</div>
</template>

<script>
	export default {
		setup(){
		const titulo = "Capturar Libro";

		return { titulo }
		}
	}	
</script>

Y lo damos de alta en app.js agregando estas dos lineas:

Finalmente ingresamos a consola y ejecutamos:
npm run watch
Para que los cambios en los archivos Vue se compilen automáticamente.

4. Instalación de Vue-Router (para navegar entre complementos de vue sin recargar la página).
Sitio Vue-Router: Vue-Router

Para Instlarlo tecleamos en consola:
npm install vue-router

5. Cargamos la carpeta y el archivo index.js: app/resources/js/router/index.js.
index.js

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

//const Principal = () => import("../components/Principal.vue");
const HolaMundo = () => import("../components/HolaMundo.vue");
const CreaLibro = () => import("../components/CreaLibro.vue");

const routes = [
	
	{
		path: '/home',
		name: 'holamundo',
		component: HolaMundo
	},
	{
		path: '/crealibro',
		name: 'crealibro',
		component: CreaLibro
	}
]

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

En el cual importamos los componentes y definimos las rutas.

6. Modificamos el archivo app.js agregando el archivo router/index.js:
app.js

require('./bootstrap');


import { createApp } from 'vue';

import { router } from "./router/index";

//import HolaMundo from './components/HolaMundo.vue'
//import CreaLibro from './components/CreaLibro.vue'

const app = createApp({})

//Para probar el componente de forma individual
//app.component('hola-mundo', HolaMundo)
//app.component('crea-libro', CreaLibro)

app.use(router)
 
app.mount('#app');

7. En el archivo de la vista (en nuestro caso home.blade) ponemos los router-view para que vue-route renderice ahí los componentes:
home.blade.php

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">

            <router-view />

        </div>
    </div>
</div>
@endsection

8. En el menú de la página (en este caso en el archivo views/layouts/app.blade.php agregamos los links de vue-route de la siguiente manera: