Memasang Vue Router di Laravel

Bismillah

Melanjutkan postingan sebelumnya mengenai Setup Vue Js di Laravel dalam Satu Project. Dipostingan tersebut kita telah berhasil melakukan konfigurasi awal vue agar bisa bundling dengan project laravel. Nah selanjutnya adalah kita akan menerapkan vue router di project tersebut. Vue router adalah merupakan library dari vue yang khususnya untuk melakukan routing agar aplikasi bisa berjalan layaknya Single Page Application pada umumnya.

Untuk menambahkan router di vue, masukkan perintah di terminal atau command prompt anda dengan perintah :

npm install vue-router

Tunggu hingga proses selesai.

Untuk mempermudah penerapan penggunaan vue router tersebut, kita akan membuat dua buah page/halaman. Halaman pertama adalah halaman dashboard, dan yang satunya lagi adalah halaman profile. Berikut adalah langkah-langkahnya :

1. Buat dua buah file dengan nama Dashboard.vue dan Profile.vue di direktori `resources\js\componenents`.
2. Pada masing-masing halaman tersebut buat template vue sederhana. Sebagai contoh :
Dashboard.vue

<template>
    <h3>Hai, Ini adalah halaman dashboard</h3>
</template>

<script>
    export default {
        name:'dashboard'
    }
</script>


Profile.vue

<template>
    <h3>Hai ini adalah halaman profile</h3>
</template>

<script>
    export default {
        name:'profile'
    }
</script>

3. Kemudian setelah membuat kedua file diatas, buat lagi sebuah file dengan nama Navigation.vue. Di file inilah link/routing akan ditampilkan. Berikut adalah isi dari file Navigation.vue :

<template>
    <div>
        <router-link to="/dashboard">Dashboard</router-link> | 
        <router-link to="/profile">Profile</router-link>
    </div>
</template>

<script>
    export default{
        name:'navigation'
    }
</script>

Seperti terlihat diatas, ada component bernama router-link. Dimana di component inilah kita meletakkan link dari page yang sebelumnya yang sudah dibuat menggunakan props to.
4. Edit file App.vue menjadi seperti berikut :

<template>
    <div class='container'>
        <Navigation />
        <router-view ></router-view>
    </div>
</template>

<script>
import Navigation from './Navigation.vue'

export default {
    components : {Navigation}
}
</script>

5. Kemudian edit kembali file app.js, menjadi seperti dibawah ini :

import App from './components/App'
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import Dashboard from './components/Dashboard.vue'
import Profile from './components/Profile.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/dashboard',
      component: Dashboard,
      name: 'dashboard',
      meta: {
          title: 'Dashboard'
      },
    },
    {
      path: '/profile',
      component: Profile,
      name: 'profile',
      meta: {
          title: 'Profile'
      },
    },
  ],
});

const app = createApp({
    components: {
        App
      }
});

app.use(router)
app.mount('#app');

Penjelasan :
• Yang diperlukan untuk membuat router adalah dengan meng-import beberapa method dari vue-router yaitu createRouter dan createWebHistory.
• Didalam method createRouter, tambahkan parameter history dan routes.
• Pada parameter history isinya adalah createWebHistory yang mana parameter history ini gunanya adalah agar history dari url dibrowser yang dibuat bisa dibaca oleh vue-router dan di render sebagai SPA.
• Dibagian parameter routes, disini kita daftarkan seluruh routes yang diperlukan. Sebagai contoh, disini kita memerlukan routing untuk halaman Dashboard dan Profile. Yang perlu diperhatikan pada saat membuat routes adalah di parameter path, component, dan name. Dimana parameter path berisi url path yang merujuk ke component tertentu. Kemudian component merupakan komponen apa yang akan ditampilkan/dirender pada saat berada di path tadi, dan name adalah merupakan nama routes itu sendiri.
6. Sampai disini routing di vue sudah selesai dibuat. Dan pada saat dijalankan maka tampilannya adalah seperti dibawah ini :

Saat di klik salah satu link/url maka akan membuka page tersebut tanpa harus mereload keseluruhan halaman seperti dibawah ini :

7. Terakhir agar tidak muncul pesan Not Found dilaravel pada saat mereload page penuh, maka perlu diubah routing laravel di `routes\web.php` menjadi seperti berikut :

<?php

use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/{any}', function () {
    return view('welcome');
})->where('any','.*');

Demikian tutorial lanjutan mengenai Memasang Vue Router di Laravel, Jika ada tidak dipahami silahkan bertanya dikolom komentar dibawah atau bisa melalui email private.sardi@gmail[dot]com. Untuk Source code dari project ini sendiri bisa diakses melalui github di https://github.com/sardiabuzubayr/sample-vue-laravel

Semoga bermanfaat wassalamualaikum warahmatullah wabarakaatuh.

loading...