Laravel: Vue-Router does not redirect to path

Question

I am new to Laravel and Vue JS. I am trying to integrate vue in a laravel project and my vue-router is not working and I don't understand why. I am trying to go to the path /login but it just renders the Example component. How can I fix this?

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
})

Kamlesh Paul Kamlesh Paul · Accepted Answer · 2020-08-31T03:43:04

Just because u r render only "Example" Component here render: h => h(Example),

use <router-view></router-view> instead so all router router view will render

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

or u can use a main vue component which will responsible to to render <router-view></router-view>

you can check my structure

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

Laravel: Vue-Router does not redirect to path

1 Answers