Vue: Mengganti Judul Halaman Dinamis pada vue-router

Membuat aplikase web based menggunakan konsep Single Page Application (SPA) menggunakan vue sangat powerfull menurut pengalamanku. Performa aplikasinya sangat bagus dan proses developmentya jauh lebih cepat dibanding saat aku menggunakan jQuery.

Webapp yang menggunakan konsep SPA pertamakali yang aku rilis untuk level production adalah BengkelBaik. Aplikasi berisi Point of Sales(POS) dan seperangkat tools lainnya untuk mengelola bengkel. Karena itu adalah pengalaman pertama, aku sempat mengalami kesulitan saat mau mengganti judul halaman (page title) secara dinamis sesuai dengan halaman yang dikunjungi pengguna.

Aku menggunakan package vue-router untuk mengimplementasikan SPA pada aplikasi BengkelBaik. Di sana ada dua bagian judul yang butuh diubah yaitu:

  • judul halaman pada tag <title>
  • judul halaman pada komponen toolbar vuetify.

Setelah browsing beberapa saat, akhirnya ketemulah solusinya. Yaitu menggunakan watcher. Kodingan untuk mengubah judul halaman yang kubuat seperti berikut ini:

watch:{

   $route(to, from) {
       document.title = to.meta.title || 'Dashboard';
       this.title = to.meta.title
   },
}

Pada contoh kodingan di atas dapat dilihat bahwa ada dua komponen yang diubah secara dinamis sesuai nilai yang didapat pada $route yaitu:

  • document.title digunakan untuk mengubah judul halaman pada tag <title>. Jika to.meta.title nilainya undefined maka judul halaman akan menggunakan nilai default yaitu Dashboard
  • this.title digunakan untuk mengubah judul halaman pada komponen toolbar vuetify.

Penggantian judul halaman pada komponen toolbar vuetify dapat dilakukan seperti berikut:

<v-toolbar-title v-text="title"/>

Kodingan untuk menambahkan judul halaman pada router.js adalah seperi berikut contohnya:

{
  path: '/module/vehicles',
  component: Vehicles,
  meta: {title: 'Pengelolaan Kendaraan'}
}

Komentar