KODING SANA SINI

Ketika kita membuat sebuah website tentunya kita memerlukan sebuah navigasi yang berfungsi untuk membantu pengguna menjelajahi website kita, berpindah dari satu halaman ke halaman lain. Untuk mengakomodir hal tersebut di vue js disediakan vue-router.

Vue-router ini berfungsi untuk mengatur routing atau link di setiap halaman website kita. Vue-router akan mengatur sebuah link atau url yang diakses oleh pengguna akan menampilkan file atau halaman yang mana. Kalau kamu sebelumnya pernah menggunakan framework PHP seperti Laravel, Nah kurang lebih fungsi vue-router ini sama dengan route.php nya Laravel.

Sebelum memulai instalasi dan configurasi vue-router, bagi kamu yang belum install vue js silahkan bisa mengunjungi cara install vuejs

Kalau sudah install vue js-nya, selanjutnya adalah install vue-router. Kalau kamu menggunakan vue-cli sebenarnya diawal instalasi vue js akan ditanya apakah akan sekalian install vue-router atau tidak. Tapi, jika belum menginstall vue-router kamu cukup buka terminal dan masuk ke direktori root vue project dan masukkan perintah berikut.

npm install vue-router

Setelah berhasil install vue-router, sekarang mari kita buat file yang berfungsi untuk mengatur routing website kita. Kurang lebih seperti inilah contoh kode untuk mengatur routingnya.

import VueRouter from 'vue-router'

import Home from '@/components/Home.vue';
import About from '@/components/About.vue';
import PageNotFound from '@/components/404.vue';

Vue.use(VueRouter)

const routes = [
  {
    path: "/",
    name: 'Home',
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: About
  },
  { path: "*", component: PageNotFound },
];

const router = new VueRouter({
  routes,
  mode: 'history'
})

export default router

Kode di atas berfungsi untuk mendefinisikan route apa saja yang ada pada website kita. Pertama, kita harus mengimport vue, yang merupakan inti dari website kita. Selanjutnya, kita perlu mengimport vue-router untuk mengatur rute website. Jangan lupa untuk memanggil Vue.use(VueRouter). Ini akan memberitahu vue bahwa kita menggunakan vue-router sebagai router website. Simbol ‘@’ digunakan untuk merujuk ke direktori ./src. Ini memudahkan kita untuk memanggil direktori tersebut hanya dengan menuliskan ‘@’. Path ‘*’ digunakan sebagai wildcard atau file default yang akan dieksekusi ketika pengguna memasukkan path yang tidak ditemukan atau tidak cocok dengan daftar route yang telah kita buat.

Kemudian kita juga membuat object routes yang berisi daftar route. Setiap route minimal mempunyai beberapa attribute:

• path: URL atau path yang didaftarkan
• name: Nama atau alias untuk sebuah path
• component: File vue yang berisi template yang akan ditampilkan di browser

Mode history berfungsi untuk membuat vue tidak mereload halaman ketika pengguna berpindah halaman. Simpan file routes diatas di ./src/router/index.js. Jika belum ada direktori router, silahkan buat dahulu. Sebenarnya kamu bebas mau menyimpan file tersebut di direktori mana pun dan dengan nama file apapun. Pada tutorial ini disimpan dengan nama index.js di direktori ./src/router.

Setelah routing website telah kita config, selanjutnya kita akan mengubah main.js yang berfungsi sebagai gerbang utama dari sistem kita. Kita akan mengubah main.js agar menggunakan vue-router pada saat merender vue core. Buka file main.js, biasanya ada pada direktori src dan lakukan perubahan sehingga menjadi seperti berikut.

import App from './App'
import router from './router/'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

Terakhir kita akan mengubah file interface utama vue yaitu App.vue untuk me-render file sesuai yang telah dideklarasikan pada router yang telah kita buat. Buka file App.vue dan lakukan perubahan sehingga menjadi seperti berikut.

<tamplate>
  <div id="app">
    HOME | ABOUT
  </div>
</template>
export default {
  name: 'App',
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

Gunakan router-link ketika ingin membuat anchor atau kalau dalam html itu adalah tag a href=”#”. router-view berfungsi untuk memanggil atau me-render file yang telah dideklarasikan pada router sesuai path url yang sedang di buka di browser

Kode diatas merupakan kode sederhana yang menunjukan bagaimana vue-router bekerja untuk mengatur routing pada halaman website kita. Untuk penjelasan mengenai cara membuat komponen-komponennya akan dibahas di artikel yang berbeda. Selain itu kamu juga bisa menambahkan framework html css agar tampilannya lebih bagus seperti bootstrap atau yang lainnya.

Berikut tampilan hasil dari kode diatas. Silahkan buat file Home.vue, About.vue, dan 404.vue secara mandiri sesuai selera masing-masing. Ini hasil buatan saya. putih suci dan polos, sangat sederhana.

Sekian tutorial Membuat Route Menggunakan Vue Router di Vue.js ini, Silahkan jika ada pertanyaan drop di kolom komentar. Terima kasih.