Pernah memperhatikan tidak, setiap kita berpindah halaman di Medium, peramban (browser) tidak memuat ulang seluruh bagian web. Namun hanya memuat sebagian dan sebutuhnya.

Semisal, dari halaman dashboard, kemudian kita mengklik salah satu tautan (hyperlink) artikel, maka yang akan dimuat hanya konten artikel tersebut, tanpa perlu memuat ulang header & footer.

Kenapa harus dibuat begitu? Untuk kenyamanan pengguna dan performa tentunya.

Di Laravel, kita bisa membuat fitur yang serupa menggunakan VueJS. Sayangnya, mengandalkan VueJS saja sepenuhnya — dengan manipulasi komponen — masih dirasa sulit untuk membuat mendekati sempurna. Oleh karenanya, kita butuh package tambahan untuk mendukung VueJS, sesuai judul, nama package-nya adalah Vue Router.

Anggap saja kita punya tiga buah komponen VueJS, antara lain:  <user-index>, <user-create>, dan <user-view>. Dari namanya, dapat diketahui kalau komponen tersebut dioperasikan untuk menjalankan fungsi CRUD data user — minus update data — tentunya.

Dari ketiga komponen tersebut, kita bisa saja membuat tiga route yang berbeda di Laravel. Masing-masing route akan memuat satu buah view (Blade). Setip view, juga memuat komponen VueJS sesuai dengan fungsinya, view user index akan memuat komponen <user-index> misalnya.

Route::get('user', 'UserController@index');
Route::get('user/create', 'UserController@create');
Route::get('user/{id}', 'UserController@show');

Tidak ada yang salah memang. Namun, bagi saya, ini cukup membuang sumber daya.

Contoh yang saya alami, dari halaman user create ingin berpindah ke halaman index user. Dengan request HTTP, kita akan memuat ulang peramban untuk menampilkan halaman lainnya. Begitu seterusnya jika kita ingin berganti ke halaman lainnya.

Inginnya, saya membuat satu buah route user, yang di dalamnya kita bisa berpindah & berganti halaman/komponen tanpa harus memuat ulang peramban. Seperti yang sudah saya singgung di atas, Laravel dan VueJS saja tidak mendukung fitur ini. Oleh karenanya, kita butuh librari tambahan, yaitu Vue Router.

Mempersiapkan Aplikasi dari Sisi Laravel

Sebelum menggunakan Vue Router, dan semakin beranjak jauh ke bahasan VueJS, terlebih dahulu kita harus mempersiapkan basis aplikasi di Laravel itu sendiri.

Dari Laravel, kita akan membuat satu buah route dengan tautan /user dan merujuk ke controller UserController. Dalam controller tersebut, terdapat empat buah metode yang berfungsi untuk operasi CRUD. Skrip lengkapnya dapat dilihat pada media di bawah.

<?php

namespace App\Http\Controllers;

use App\User;
use Illuminate\Http\Request;

class UserController extends Controller
{
    public function paginate()
    {
        $users = User::orderBy('name', 'ASC')
            ->paginate(request('limit', 20));

        if (request()->all()) {
            $users->appends(request()->all());
        }

        return response()->json($users);
    }

    public function view()
    {
        return view('user.view');
    }

    public function store(Request $request)
    {
        $this->validate($request, [
            'name'  => 'required|string|max:50',
            'email' => 'required|email|unique:users,email',
        ]);

        $user = User::create([
            'name'     => $request->name,
            'email'    => $request->email,
            'password' => bcrypt(str_random()),
        ]);

        return response()->json($user);
    }

    public function show($id)
    {
        $user = User::whereId($id)->first();
        if (empty($user)) {
            return response()->json([
                'message' => 'User not found.',
            ], 404);
        }

        return response()->json($user);
    }
}

Metode view() berfungsi untuk memuat view dan menampilkan komponen dari VueJS. Sisanya merupakan proses yang akan mengembalikan response data dalam format JSON. Metode ini nantinya akan dipanggil melalui tautan dengan teknik AJAX dari komponen VueJS.

Jangan lupa untuk menambahkan route untuk masing-masing metode controller di atas.

Route::post('/user', 'UserController@store');
Route::get('/user/paginate', 'UserController@paginate');
Route::get('/user/{id}', 'UserController@show');
Route::get('/user', 'UserController@view');

Sampai di sini, hampir tak ada bedannya dengan apa yang biasa kita lakukan dalam mengembangkan aplikasi web berbasis Laravel. Membuat controller, memuat view, manipulasi pangkalan data, kemudian mendefinisikannya dalam route.

Nah, hal yang cukup mencolok dalam aplikasi adalah penggunaan tag yang tidak biasa pada view yang dimuat oleh controller di atas. Sebagai contoh pada view berikut.

@extends('layouts.app')

@section('content')
<div class="container">
  <div class="row">
    <div class="col-md-8 col-md-offset-2">
      <div class="panel panel-default">
        <div class="panel-heading">User</div>

        <div class="panel-body">
          <transition>
            <router-view></router-view>
          </transition>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

Tag <router-view> berfungsi untuk menampilkan komponen yang akan kita definisikan nantinya di Vue Router.

Sedangkan tag <router-link> merupakan komponen yang telah disediakan Vue Router. Kita bisa menggunakannya di mana saja dalam view selama dalam cakupan vue instance. Contoh skripnya saya implementasikan pada komponen user index.

Penjelasan lebih detail, dapat dibaca langsung pada dokumentasi resmi Vue Router.

router-link · vue-router

is the component for enabling user navigation in a router-enabled app. The target location is specified with the to prop. It renders as an tag with correct href by default, but can be configured with the tag prop. In addition, the link automatically gets an active CSS class when the target route is active.

Menginstal dan Mengkonfigurasi Vue Router

Pertama, instal terlebih dahulu Vue Router menggunakan NPM. Adapun perintahnya adalah sebagai berikut:

$ npm install --save-dev vue-router

Atau, juga bisa menggunakan Yarn package.

$ yarn add dev vue-router

Modifikasi berkas resources/assets/js/app.js sehingga menjadi seperti skrip di bawah.

/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/

require('./bootstrap');

/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('example', require('./components/Example.vue'));

/**
* Vue Router
*
* @link http://router.vuejs.org/en/installation.html
*/
import VueRouter from 'vue-router';
Vue.use(VueRouter);

// define routes for users
const routes = [
{
  path: '/',
  name: 'userIndex',
  component: require('./components/user/index.vue')
},
{
  path: '/create',
  name: 'userCreate',
  component: require('./components/user/create.vue') 
},
{
  path: '/view/:id',
  name: 'userView',
  component: require('./components/user/view.vue')
}
]

const router = new VueRouter({ routes });

const app = new Vue({
  router
}).$mount('#app');

Mulai dari baris ke 21, kita mengimpor package Vue Router dan menambahkannya ke dalam VueJS. Di komponen nantinya, kita dapat menggunakan objek this.$route dan this.$router untuk mengakses objek Vue Router tersebut.

Properti this.$route berisi informasi route yang sedang diakses, mulai dari path, name, params, dan lain sebagainya. Sedangkan this.$router berisi objek untuk memanipulasi route, semisal redirect dan replace.

Dari baris ke 25, didefinisikan route untuk CRUD user. Setiap satu route, akan memanggil satu komponen VueJS yang telah dibuat sebelumnya.

Perlu diperhatikan lagi, bahwa route tersebut tetap berbasis pada route utama yang telah didefinisikan pada Laravel, yaitu /user.

domain.com/user/# // user index
domain.com/user/#/create // create new user
domain.com/user/#/view/12 // view user

Untuk skrip lengkap masing-masing komponen dapat dillihat pada tautan berikut.

Contoh Aplikasi

Seperti biasa, saya selalu menyertakan contoh lengkap aplikasi pada setiap tutorial. Kalian bisa melihat atau menggunakannya dari repositori Github berikut.

laravel-id/vue-router

vue-router – Harmony Laravel + Vue + VueRouter

Demo aplikasi dapat langsung dilihat pada tautan berikut.

Untuk contoh aplikasi yang lebih kompleks, kalian bisa lihat pada sumber kode (source code) Glosarium Indonesia. Implementasi Vue Router dapat dilihat pada cabang (branch) revue.

Idealnya, Vue Router umum digunakan untuk SPA (Single Page Application) untuk website yang tidak terlalu kompleks. Pun begitu, Vue Router juga dapat dikombinasikan dengan route bawaan framework Laravel. Tentunya, Vue Router tidak bisa diakses sebelum kita membuat route di Laravel terlebih dahulu bukan? 😉

Masih bingung dengan penjelasan di atas? Jangan sungkan untuk bertanya melalui publikasi ini. Bagikan tulisan ini jika bermanfaa buat kalian. Jangan lupa, ikuti juga Laravel Indonesia untuk mendapatkan tulisan terbaru seputar Laravel dalam Bahasa Indonesia. 😎