{{ message }}

Cara Membuat Router Single Page Application Untuk Vue JS

30/07/2017 | Javascript
Cara Membuat Router Single Page Application Untuk Vue JS

Vue JS adalah framework Javascript yg elegan dan rapih struktur kode-nya. Dengan pola reactive dan MVVM-nya segala kasus DOM yg rumit dapat dimimalisir dengan cara yg elegan. Vue JS melakukan render pada tampilan setiap adanya perubahan data dan ini dilakukan secara otomatis. Dengan berbagai kelebihan dari Vue JS inilah, framework Javascript ini menjadi pilihan untuk membangun Single Page Application. SPA adalah sistem aplikasi yg tidak melakukan perpindahan halaman, karena itu URL yg dipakai selalu menyertakan # agar halaman tidak berpindah dengan sesungguhnya. Oleh sebab itu setiap ada perpindahan URL maka kita harus merouting sendiri ke komponen Vue JS mana yg seharusnya kita gunakan untuk membuka sebuah halaman ataupun form.

Experiment kali ini kita akan membuat router SPA untuk Vue JS. Agar lebih efisien, disini saya langsung menyertakan komentar di source code-nya, yaitu berupa penjelasan tentang proses yg dilakukan.

Source Code Lengkap + Penjelasan

<!DOCTYPE html>
<html lang="en">
 
<head>
 
    <meta charset="UTF-8">
    <title>SPA Router Untuk Vue JS</title>
 
<!--    Mempersiapkan beberapa library yg diperlukan -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu+Condensed">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
 
</head>
 
<body>
 
    <div class="container">
 
<!--       Membuat Menu 
           URL Menu ini yg nantinya kita route ke komponen Vue JS sebagai halaman
       -->
        <div class="navbar navbar-default">
            <ul class="nav nav-pills">
                <li><a href="#/pergi/ke/hal-1">Menu 1</a></li>
                <li><a href="#/pergi/ke/hal-2">Menu 2</a></li>
                <li><a href="#/pergi/ke/hal-3">Menu 3</a></li>
            </ul>
        </div>
<!--        End Membuat Menu -->
 
<!--       Halaman yg berpindah akan ditempatkan di tag komponen ini -->
        <div id="content">
            <component :is="page"></component>
        </div>
 
 
    </div>
    
    <div class="navbar navbar-default" style="text-align: center; position: fixed; left: 0; bottom: 0; width: 100%; margin: 0; padding: 0">
        <br><b>Copyright &copy; By <a href="http://qaiserlab.com">QaiserLab</a> 2016-2017</b>
        <br>&nbsp;
    </div>
 
<!--   Mempersiapkan Template untuk halaman 1 -->
    <template id="template-1">
        <h1>
            Ini {{ title }}
        </h1>
    </template>
 
<!--   Mempersiapkan Template untuk halaman 2 -->
    <template id="template-2">
        <h1>
            Ini {{ title }}
        </h1>
    </template>
 
<!--   Mempersiapkan Template untuk halaman 3 -->
    <template id="template-3">
        <h1>
            Ini {{ title }}
        </h1>
    </template>
 
    <script>
        
//        Kontrol komponen untuk masing-masing Halaman 1-3
        
        Vue.component('halaman-1', {
            template: '#template-1',
            data: function () {
                return {
                    title: 'Halaman 1',
                };
            },
        });
 
        Vue.component('halaman-2', {
            template: '#template-2',
            data: function () {
                return {
                    title: 'Halaman 2',
                };
            },
        });
 
        Vue.component('halaman-3', {
            template: '#template-3',
            data: function () {
                return {
                    title: 'Halaman 3',
                };
            },
        });
//        End Halaman 1-3
 
        var content = new Vue({
            el: '#content',
            data: {
//                Perubahan variable page telah di-binding dengan berubahnya komponen di tengah konten
//                Lihat line 35
//                Halaman default adalah halaman 1
//                Artinya jika URI/Hash tidak ada isinya, berarti larinya ke halaman 1
                page: 'halaman-1',
                
//                Disini konfigurasi router jika URI/Hash maka akan dilarikan ke Komponen yg mana
//                Jika kita membuka url ...#/pergi/ke/hal-1 maka komponen yg dirender adalah halaman-1
//                dan seterusnya...
                routes: {
                    '#/pergi/ke/hal-1': 'halaman-1',
                    '#/pergi/ke/hal-2': 'halaman-2',
                    '#/pergi/ke/hal-3': 'halaman-3',
                },
            },
            ready: function () {
                
//                Ini yg terpenting
//                Jika terjadi perubahan URI/Hash
//                ketika salah satu menu link (line 24) di klik
//                Maka kita mulai me-route alamatnya sesuai dengan konfigurasi
                $(window).on('hashchange', this.route.bind(this));
                
//                Yg ini penting dilakukan
//                Karena event hashchange tidak akan terpanggil
//                Jika tidak terjadi perubahan pada URI/Hash
//                Jadi ketika Web Browser di refresh
//                Router tidak berjalan karena tidak terjadi perubahan pada URI/Hash
//                Karena itu agar router tetap berjalan ketika Web Browser direfresh
//                Method route saya panggila di Lifecycle Hooks Ready ini
                this.route();
            },
 
            methods: {
                route: function () {
                    
//                    Melakukan looping untuk mengecek ke komponen manakah URI/Hash yg dimaksud
//                    Acuan-nya lihat line 110
                    $.each(this.routes, function (uri, page) {
                        
//                        Jika lokasi yg dibuka saat ini ditemukan di konfigurasi router
//                        Maka page dipindahkan ke halaman yg dimaksud sesuai konfigurasi router (line 110)
                        if (location.hash == uri) {
                            this.page = page;
                        }
                    }.bind(this));
                },
            },
 
        });
    </script>
 
</body>
 
</html>