Siguiendo un tuto de vue <3

2019-06-16 17:37:08 -04:00
parent d5ff988b08
commit 2f09a63357
9 changed files with 70 additions and 41 deletions
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -1,32 +1,30 @@
-/**
- * First we will load all of this project's JavaScript dependencies which
- * includes Vue and other libraries. It is a great starting point when
- * building robust, powerful web applications using Vue and Laravel.
- */
+import Vue from 'vue'
+import VueRouter from 'vue-router'

-require('./bootstrap');
+Vue.Use(VueRouter)

-window.Vue = require('vue');
+import App from './views/App'
+import Hello from './views/Hello'
+import Home from './views/Home'

-/**
- * The following block of code may be used to automatically register your
- * Vue components. It will recursively scan this directory for the Vue
- * components and automatically register them with their "basename".
- *
- * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
- */
-
-// const files = require.context('./', true, /\.vue$/i);
-// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));
-
-Vue.component('example-component', require('./components/ExampleComponent.vue').default);
-
-/**
- * Next, we will create a fresh Vue application instance and attach it to
- * the page. Then, you may begin adding components to this application
- * or customize the JavaScript scaffolding to fit your unique needs.
- */
+const router = VueRouter({
+    mode: 'history',
+    routes: [
+        {
+            path: '/',
+            name: 'home',
+            component: Home
+        },
+        {
+            path: '/hello',
+            name: 'hello',
+            component: Hello
+        },
+    ],
+});

 const app = new Vue({
    el: '#app',
+    components: { App },
+    router,
 });
--- a/resources/js/views/App.vue
+++ b/resources/js/views/App.vue
@@ -0,0 +1,15 @@
+<template>
+    <div>
+        <h1>Vue Router Demo App</h1>
+    </div>
+    <p>
+        <router-link :to="{ name: 'home' }">Home</router-link>
+        <router-link :to="{ name: 'hello' }">Hello World</router-link>
+    </p>
+    <div class="container">
+        <router-view></router-view>
+    </div>
+</template>
+<script>
+    export default {}
+</script>
--- a/resources/js/views/Hello.vue
+++ b/resources/js/views/Hello.vue
@@ -0,0 +1,3 @@
+<template>
+    <p>Hello!</p>
+</template>
--- a/resources/js/views/Home.vue
+++ b/resources/js/views/Home.vue
@@ -0,0 +1,3 @@
+<template>
+    <p>This is the homepage</p>
+</template>
--- a/resources/views/welcome.blade.php
+++ b/resources/views/welcome.blade.php
@@ -3,12 +3,14 @@
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <title>Laravel</title>
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        <title>Spa!</title>
    </head>
    <body>
        <div id="app">
-            <example-component></example-component>
+            <app></app>
        </div>
+
        <script src="{{ mix('js/app.js') }}"></script>
    </body>
 </html>