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