samedi 12 octobre 2019

Laravel and Vue, vue-router link not working

I am new to laravel and Vue. what I am trying is to use vue-router to redirect to a specific link. I inserted the <router-view></router-view> in the main content with id=app and also used <router-link> as the code below but when I click on the link nothing happens.

Here is my app.js file:


require('./bootstrap');

window.Vue = require('vue');
import VueRouter from 'vue-router'

Vue.component('profile', require('./components/Profile.vue'));
Vue.use(VueRouter)

let routes = [
    {path:'/dashboard', component:require('./components/Dashboard.vue')},
    {path:'/profile', component:require('./components/Profile.vue')}
];

const router = new VueRouter({
    routes
});

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

My code snippet for router-link:

                    <li class="nav-item has-treeview menu-open">
                        <router-link to="/dashboard" class="nav-link active">
                            <i class="nav-icon fas fa-tachometer-alt"></i>
                            <p>
                                Management
                                <i class="right fas fa-angle-left"></i>
                            </p>
                        </router-link>
                        <ul class="nav nav-treeview">
                            <li class="nav-item">
                                <router-link to="/dashboard" class="nav-link active">
                                    <i></i>
                                    <p>Dashboard</p>
                                </router-link>
                            </li>
                            <li class="nav-item">
                                <router-link to="/profile" class="nav-link">
                                    <i class="nav-icon fas fa-user"></i>
                                    <p>
                                        Profile

                                    </p>
                                </router-link>
                            </li>
                        </ul>
                    </li>

The rouer-view snippet :

        <div class="content" id="app">
            <div class="container-fluid">
                <router-view></router-view>
                <!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>


via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire