sudo apt install npm
npm install cross-env
--------------------
en la carpeta del proyecto:
npm install vue-router --save
npm install
Cuando vue-router está instalado 2 componentes se registran globalmente en toda la aplicacion para usar:
RouterLinkGeneralmente usado en lugar del tagapara crear hyperlinks and acceder Vue RouterRouterViewOutlet to enable swap of designated page components
agregar las sgts lineas:
import VueRouter from 'vue-router';
window.Vue = require('vue');
Vue.use(VueRouter);
podemos ir abriendo otra consola y ejecutar:
npm run watch
este comando creará un archivo app.js dentro de la carpeta
public cada vez que se guarde algun cambio en el archivo
resources/js/app.js.
editar el archivo routes/web.php
y hacemos que nuestras rutas web sean manejas por el Vue Router, reemplazando el contenido por:
Route::get('/{vue_capture?}', function() {
return view('welcome');
})->where('vue_capture', '[\/\w\.-]*');
editar el archivo resources/welcome.blade.php
y reemplazar el contenido del body con lo siguiente:
<body>
<div id="app">
<ul>
<li><router-link to="/">Home</router-link></li>
<li><router-link to="/page-1">Page 1</router-link></li>
<li><router-link to="/page-2">Page 2</router-link></li>
</ul>
<router-view></router-view>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
ahora debemos crear las vistas relacionadas a estas 3 router links.
Entonces, en la carpeta resources/js crear la carpeta views dentro de ella crear los archivos
Home.vue
PageOne.vue
PageTwo.vue
donde cada uno de estos archivos tenga un contenido como este:
<template>
<div class="content">
* nombre de la vista para poder identificarla
</div>
</template>
ahora debemos crear nuestro archivo de rutas para decirle a Vue lo que cada router link deberia cargar
en la router view.
en resources/js creamos el archivo routes.js :
import VueRouter from 'vue-router';
import Home from './views/Home.vue';
import PageOne from './views/PageOne.vue';
import PageTwo from './views/PageTwo.vue';
let routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/page-1',
name: 'pageOne',
component: PageOne
},
{
path: '/page-2',
name: 'pageTwo',
component: PageTwo
},
];
const router = new VueRouter({
routes: routes,
mode: 'history'
});
export default router;
ahora volvemos a editar el archivo resources/js/app.js
agregamos la referencia al archivo de routes
import router from './routes';
y actualizamos la constante app:
const app = new Vue({
el: '#app',
router: router
});
editamos resources/views/welcome.blade.php
con elementos de estilo
.content {
display: block;
width: 960px;
margin: 20px auto;
background: lightgrey;
color: black;
padding: 20px;
}
ul {
width: 960px;
margin: 20px auto;
}
li {
display: inline-block;
}
a,
a:visited {
color: grey;
}
a:hover,
a.router-link-exact-active {
color: red;
}
finalmente, ya podemos ver nuestra pagina SPA:
donde al hacer click en los links se cargara el contenido de sus respectivas vistas sin recargar toda la página
nota: si inspeccionamos la pagina de nuestra aplicacion veremos que hay un error similar a
laravel CSRF token not found:
esto se debe a que nuestro resources/js/app.js
hace referencia a bootstrap.js y este quiere leer un meta tag de nombre "csrf-token"
que no existe, entonces lo que tenemos que hacer es agregar ese elemento en la seccion de <head>
de welcome.blade.php
<meta name="csrf-token" content="{{csrf_token()}}">
fuente original:
https://www.wearethreebears.co.uk/blog/building-a-basic-spa-with-laravel-and-vue-router
No hay comentarios:
Publicar un comentario