Soy nuevo en Laravel y Vue JS. Estoy tratando de integrar vue en un proyecto de laravel y mi vue-router no funciona y no entiendo por qué. Estoy tratando de ir a la ruta / inicio de sesión, pero solo muestra el componente de ejemplo. ¿Cómo puedo arreglar esto?

app.js

require('./bootstrap');

window.Vue = require('vue');

import router from './router';
import Example from "./components/ExampleComponent";

const app = new Vue({
    el: '#app',
    render: h => h(Example),
    router
});

router.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import Example from './components/ExampleComponent';
import Login from './components/LoginComponent';

Vue.use(VueRouter)

const routes = [
    {
        path: "/",
        component: Example,
        name: "example"
    },
    {
        path: "/login",
        component: Login,
        name: "login"
    }
];

export default new VueRouter({
    mode: 'history',
    routes
})
0
Reman Bala 31 ago. 2020 a las 05:12

1 respuesta

La mejor respuesta

El hecho de que solo muestre el componente "Ejemplo" aquí render: h => h(Example),

Use <router-view></router-view> en su lugar para que todas las vistas del enrutador se muestren

const app = new Vue({
    el: '#app',
    template: `<router-view></router-view>`,
    router
});

O puede usar un componente vue principal que será responsable de renderizar <router-view></router-view>

Puedes comprobar mi estructura

https://github.com/Kamleshpaul/blog/blob/master/resources/js/App.vue

2
Kamlesh Paul 31 ago. 2020 a las 03:43