Cara Mudah Menggunakan Vue Router

Halo semuanya, kembali lagi di sahretech. Baiklah pada kesempatan kali ini kita akan belajar mengenai vue js, dan pembahasan kali ini adalah tentang bagaimana cara menggunakan vue router. Penasaran?, ayo ikuti tutorialnya berikut ini.

Jika kalian menggunakan html biasa, cara untuk berpindah halaman adalah dengan menggunakan tag <a></a>, dan mengisikan alamat halaman yang dituju. Sedangkan jika kalian menggunakan vue js. Kalian harus menggunakan vue router. Vue router adalah router resmi miliki vue js, dimana penggunaanya sangat mudah untuk pembuatan single page application.

Note: Single Page Application adalah istilah untuk membuat web dinamis yang tidak perlu merequest seluruh halaman ke server. Perbedaan yang paling jelas antara single page application dengan non single page application adalah pada saat menampilkan data halaman. Single page application tidak mereload seluruh data, hanya mengambil data baru saja sehingga performanya jauh lebih cepat. Sedangkan non single page application akan merequest seluruh data halaman sehingga performanya jauh lebih berat.

Baca Artikel Lain ✨

📰 1. Mudahnya Instalasi Project Vue js dan depedensi dengan Vue Ui read more

📰 2. Cara Melakukan Http Request pada Vue Js dengan Menggunakan Axios read more

📰 3. Cara Mudah Instalasi dan Menjalankan Vue Admin Template read more

Cara Menggunakan Vue Router

Pada tutorial kali ini kita akan membuat sebuah project vue js sederhana, dimana library vue js dan vue router tidak kita install di local tapi menggunakan cdn. Bagi pemula, penggunaan cdn ini sangat membantu sekali, dimana mungkin banyak orang belum belajar apa itu npm.

1. Buatlah sebuah folder baru dengan nama vue-router-cdn untuk lokasi folder bebas kalian tentukan sendiri. Lalu buatlah sebuah file baru di dalamnya dengan nama index.html. Copy script di bawah ini dan pastekan ke dalam file index.html



<!DOCTYPE html>
    <html>
    <head>
        <title>Vue.js Routing From Scratch Using Vue Router CDN</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
        <!-- import library vue js  -->
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <!-- import library vue router  -->
        <script src="https://unpkg.com/vue-router"></script>
    </head>
    <body>
    
    <div id="app" class="container" style="margin-top: 50px;">
        <!-- membuat menu  -->
        <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
          <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
            <!-- membuat daftar menu  -->
            <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                <li> <router-link class="nav-link" to="/"> Home </router-link> </li>
                <li> <router-link class="nav-link" to="about"> About </router-link> </li>
                <li> <router-link class="nav-link" to="contact"> Contact </router-link> </li>
            </ul>
          </div>
        </nav>
    
        <div class="text-center" style="margin-top: 20px;">
            <!-- content dari halaman yang berbeda akan ditampilkan di bawah ini  -->
            <router-view></router-view>
        </div>
    </div>
    
    <!-- Halaman vue -->
    <script src="home.js"></script>
    <script src="about.js"></script>
    <script src="contact.js"></script>
    
    <!-- mendefinisikan semua route/link -->
    <script>
    var routes = [
      //   path adalah url, component adalah var yang diambil dari tiap halaman  
      { path: '/', component: Home },
      { path: '/about', component: About },
      { path: '/contact', component: Contact },
    ];
    
    // instace of vue router 
    var router = new VueRouter({
      routes: routes,
      mode: 'history',
      base: '/'
    });
    
    //instace of vue js
    var app = new Vue({
        el: '#app',
          router: router
    })
    </script>
    
    </body>
    </html>

Penjelasan

Kita membuat sebuah halaman web sederhana. Dimana terdapat menu di atasnya, lalu dibawahnya terdapat konten yang disesuaikan dengan menu yang diklik. Jika home maka isinya home, jika about maka isinya about, dan jika contact maka isinya contact.

Semua component vue js akan ditampilkan di bawah tag <div id="app">. Jika di html biasa kita menggunakan tag <a href>, maka dengan vue js kita menggunakan <router link> untuk menuju ke suatu halaman. Dan <router-view> adalah tampilan yang akan diambil dari tiap halaman yang berbeda.

Di dalam tutorial ini hal yang juga penting untuk kalian perhatikan adalah script di bawah ini.

    

<script>
    var routes = [
        //   path adalah url, component adalah var yang diambil dari tiap halaman  
        { path: '/', component: Home },
        { path: '/about', component: About },
        { path: '/contact', component: Contact },
    ];
        
    // instace of vue router 
    var router = new VueRouter({
        routes: routes,
        mode: 'history',
        base: '/'
    });
        
    //instace of vue js
    .....
</script>

var routes = [] berfungsi untuk meginisialisasi semua router atau link ke berbagai halaman yang ada. Dan var router = new VueRouter({}) berfungsi untuk menginisialisasi vue-router dan memberikan konfigurasi di dalamnya.

2. Buatlah sebuah file baru dengan nama home.js lalu copy script di bawah ini dan pastekan di dalam file tersebut.



var Home = {
    template: "<div class='jumbotron'><h1>Home</h1><p>This is home page</p></div>"
};

3. Buatlah sebuah file baru dengan nama about.js lalu copy script di bawah ini dan pastekan di dalam file tersebut.



var About = { 
    template: "<div class='jumbotron'><h1>About</h1><p>This is about page</p></div>"
};

4. Buatlah sebuah file baru dengan nama contact.js lalu copy script di bawah ini dan pastekan di dalam file tersebut.



var Contact = { 
    template: "<div class='jumbotron'><h1>Contact</h1><p>This is contact page</p></div>"
};

Penjelasan

Di bawah ini adalah penjelasan untuk tahap 2, 3, dan 4. Kalian bebas membuat tag html apa saja di dalam { template: "..."}. Dan Jika kalian ingin membuat halaman baru maka kalian perlu menambahkan beberapa script di dalam file index.html

<router-link> berfungsi sebagai link
<script src=""> berfungsi untuk menyisipkan component
{ path: '/...', component: ... } berfugnsi untuk menginisialisasi route baru

Jalankan project kalian, lalu coba untuk mengklik icon menunya satu persatu. Hasilnya akan tampak seperti gambar di bawah ini

Tampilan akhir project

Sekian tutorial cara menggunakan vue router, semoga artikel kali ini bermanfaat. Bila ada yang ingin ditanyakan silahkan tinggalkan di kolom komentar di bawah ini dan mari kita diskusikan bersama. Sampai jumpa di tutorial pemrograman keren lainnya.

Sahretech

Cara Mudah Menggunakan Vue Router

Cara Menggunakan Vue Router

Penjelasan

Penjelasan

No comments

Kategori Pemrograman

Popular

Facebook