Kita hanya perlu manambahkan modul vue-route ke aplikasi dan membuat navigasi route untuk menggunakannya.
Caranya adalah sebagai berikut
Mari kita install laravel, library vue beserta modul pendukung, dan vue-router.
laravel new lavue-router cd lavue-router npm install npm install vue vue-loader vue-template-compiler --save-dev npm install vue-router
Selanjutnya buka app.js lalu buat seperti dibawah ini.
import Vue from 'vue';
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import App from './components/App'
import Home from './components/Home'
import Login from './components/Login'
import Register from './components/Register'
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/login',
name: 'login',
component: Login
},
{
path: '/register',
name: 'register',
component: Register
},
],
})
new Vue({
el: '#app',
components: { App },
router,
});
Silahkan buat folder baru dengan nama components di direktori resources > js dan tambahkan 4 komponen didalamnya dengan nama App.vue, Home.vue, Login.vue, dan Register.vue. Lalu copas template dibawah sesuai component.
//App.vue
<template>
<div>
<div class="menu">
<ul>
<li>
<router-link :to="{ name: 'login' }">Login</router-link>
</li>
<li>
<router-link :to="{ name: 'register' }">Register</router-link>
</li>
</ul>
</div>
<div class="content">
<router-view></router-view>
</div>
</div>
</template>
//Home.vue
<template>
<div>
<h1>Welcome</h1>
</div>
</template>
//Login.vue
<template>
<div>
<h1>Halaman Login</h1>
</div>
</template>
//Register.vue
<template>
<div>
<h1>Halaman Register</h1>
</div>
</template>
Disini App.vue digunakan sebagai komponen induk / main component, sedangkan komponen Login.vue dan Register.vue kita buat sebagai halaman contoh untuk kita gunakan vue-router dan membuat navigasi link menu.
Selanjutnya buka welcome.blade.php dan ubah html yang ada dengan dibawah ini.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{csrf_token()}}">
<title>Vue-Router</title>
</head>
<body>
<div id="app">
<app></app>
</div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
Terakhir, buka file webpack.mix.js ubah mix yang ada dengan dibawah ini dan jalankan perintah compiling npm run dev.
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js').vue()
npm run dev ✔ Compiled Successfully in 97ms ┌──────────────────────────────────────────────────────┬───────┐ │ File │ Size │ ├──────────────────────────────────────────────────────┼───────┤ │ /js/app.js │ 1 MiB │ └──────────────────────────────────────────────────────┴───────┘ webpack compiled successfully
Setelah selesai, silahkan jalankan aplikasi pada browser.
php artisan serve
Vue-router siap digunakan.