Tutorial Vue Router Indonesia

Perkenalan

Vue sangat berguna untuk membuat Aplikasi Satu Halaman, halaman webnya juga sangat interaktif yang memungkinkan kita untuk tidak me-refresh halaman ketika kita mengubah dari halaman satu ke halaman yang lain.

Jika website ka…



Perkenalan

Vue sangat berguna untuk membuat Aplikasi Satu Halaman, halaman webnya juga sangat interaktif yang memungkinkan kita untuk tidak me-refresh halaman ketika kita mengubah dari halaman satu ke halaman yang lain.

Jika website kamu memiliki banyak halaman dan kamu menggunakan Vue, itulah mengapa kamu membutuhkan Vue Router. Note: Pastikan kalian paham tentang Vue dan Javascript dasar



Basic Dari Vue Router



? Mempersiapkan Vue Router dari awal

1.Pertama Kita Install Vue Router di Command Line

$ npm i vue-router@next

2.Konfigurasi pada Direktori /src/router/index.js

import { createWebHistory, createRouter } from "vue-router";
// Import Component2 Kalian

import Home from "@/views/Home.vue"; 
import About from "@/views/About.vue";

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

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

Note: Di direktori /src/router/index.js kita membuat routes di dalam sebuah array yang akan mengspesifikasikan beberapa hal:

  • Path – URL / Tempat dimana component akan di load
  • Component – Komponen yang akan diload saat path dipanggil
  • Name – (Opsional)

Dibawah array routes terdapat createRouter yang pastinya diperlukan untuk membuat router itu sendiri

Dan juga terdapat createWebHistory yang digunakan untuk beralih dari mode hash ke mode history di dalam browser, menggunakan API history HTML5, Ini yang akan membuat history pada browser kita setiap kita meload router

3.Konfigurasi pada direktori /src/main.js
Pada direktori /src/main.js kita juga perlu menambahkan sesuatu

import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // <---

createApp(App)
  .use(router) // <---
  .mount('#app')

Ya, tentunya kita perlu mengimpornya ke file utama kita



? Menggunakan Router

Ada 2 component yang diberikan oleh Vue Router yaitu <router-view /> dan <router-link to="/" />.

<router-view /> digunakan untuk membungkus component2 yang akan dirender , dan <router-link to="/" /> ini mirip seperti tag anchor pada html, pada tag anchor biasanya kita menggunakan href tetapi pada router link kita menggunakan ‘to’

Note: Biasanya <router-view /> dideklarasikan di file App.vue karena file tersebut adalah halaman utama yang isinya akan kita ubah2

Contoh:

// (/src/App.vue)
<template>
  <div id="navbar">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
  </div>
  <router-view />
</template>
// (Home.vue)
<template>
  <h1>Home Page</h1>
</template>

// (About.vue)
<template>
  <h1>About Page</h1>
</template>

? Selesai.. ya mungkin seperti itu konsep dasar vue router, mohon maaf bila bahasa yang digunakan membingungkan


Print Share Comment Cite Upload Translate
APA
Dimas Andhika | Sciencx (2024-03-29T13:36:19+00:00) » Tutorial Vue Router Indonesia. Retrieved from https://www.scien.cx/2021/04/10/tutorial-vue-router-indonesia/.
MLA
" » Tutorial Vue Router Indonesia." Dimas Andhika | Sciencx - Saturday April 10, 2021, https://www.scien.cx/2021/04/10/tutorial-vue-router-indonesia/
HARVARD
Dimas Andhika | Sciencx Saturday April 10, 2021 » Tutorial Vue Router Indonesia., viewed 2024-03-29T13:36:19+00:00,<https://www.scien.cx/2021/04/10/tutorial-vue-router-indonesia/>
VANCOUVER
Dimas Andhika | Sciencx - » Tutorial Vue Router Indonesia. [Internet]. [Accessed 2024-03-29T13:36:19+00:00]. Available from: https://www.scien.cx/2021/04/10/tutorial-vue-router-indonesia/
CHICAGO
" » Tutorial Vue Router Indonesia." Dimas Andhika | Sciencx - Accessed 2024-03-29T13:36:19+00:00. https://www.scien.cx/2021/04/10/tutorial-vue-router-indonesia/
IEEE
" » Tutorial Vue Router Indonesia." Dimas Andhika | Sciencx [Online]. Available: https://www.scien.cx/2021/04/10/tutorial-vue-router-indonesia/. [Accessed: 2024-03-29T13:36:19+00:00]
rf:citation
» Tutorial Vue Router Indonesia | Dimas Andhika | Sciencx | https://www.scien.cx/2021/04/10/tutorial-vue-router-indonesia/ | 2024-03-29T13:36:19+00:00
https://github.com/addpipe/simple-recorderjs-demo