Membuat Progressbar Saat Pindah Halaman di Vue Router

Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan belajar bagaimana cara membuat indicator atau progress bar setiap berpindah halaman pada vue-router. Ok, ikuti pembahasannya di bawah ini.



Pada tutorial kali ini, kita akan mengimplementasikan package nprogress untuk membuat progress bar cantik dan elegant. Progress bar yang akan kita buat berbentuk garis yang akan muncul dari kiri ke kanan setiap kali berpindah halaman. Tutorial kali ini akan saya tulis sesimpel mungkin agar mudah dipahami, dan jika kalian ingin melihat hasil akhirnya silahkan scroll ke bagian paling bawah artikel ini.

Cara Membuat Progressbar Pada Vue JS

1, Silahkan install vue js dan vue-router terlebih dahulu. Untuk mempersingkat tulisan, cara instalasi tidak saya jelaskan disini. Tapi saya sertakan link yang bisa kalian ikuti:

1. https://www.sahretech.com/2020/11/cara-install-vue-js-dengan-vue-cli.html

2. https://www.sahretech.com/2021/12/membuat-web-spa-dengan-vue.html

2, Ok, saya anggap instalasi vue js dan vue router sudah selesai. Sekarang saatnya kalian menginstall package progressbarnya dengan menjalankan perintah di bawah ini.

npm install nprogress --save

3, Setelah package berhasil diinstall, selanjutnya kita akan menambahkan package tersebut. Silahkan buka file router kalian.  Lalu tambahkan script di bawah ini. Pada script di bawah ini, kita meng-import NPrpgress dan beserta cssnya

  

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import NProgress from 'nprogress';
    import '../node_modules/nprogress/nprogress.css'
    import Home from '../views/Home.vue'
    
    Vue.use(VueRouter)
    
    const routes = [
      {
        path: '/',
        name: 'home',
        component: Home,
        meta: {
          requiresGuest: true
        }
      },
    ]
    
    const router = new VueRouter({
      mode: 'history',
      base: process.env.BASE_URL,
      routes
    })
    
    router.beforeResolve((to, from, next) => {
      // If this isn't an initial page load.
      if (to.name) {
          // Start the route progress bar.
          NProgress.start()
      }
      next()
    })
    
    router.afterEach(() => {
      // Complete the animation of the route progress bar.
      NProgress.done()
    })
    
    export default router

4, Ok semua step di atas sudah kita jalankan, cukup simpel bukan?. Nah tiba saatnya kita lakukan uji coba. SIlahkan jalankan perintah npm run serve. Dan hasilnya akan tampak seperti di bawah ini. Jika kalian perhatikan, ada garis yang berjalan dari kiri ke kanan di bawah kotak url

Hasil Akhir

OK, sekian tutorial kita kali ini tentang cara membuat progress bar saat berpindah halaman di vue router. Semoga membantu. Jika ada kendala atau ada hal yang ingin ditanyakan, silahkan tinggalkan komentar di bawah ini atau tanya langsung melalui fanspage sahretech. Sekian dan terima kasih.