Tutorial Vue 3 dan Laravel 11 #3: Konfigurasi dan Pembuatan Router di Vue 3

sobatcoding.com - Tutorial konfigurasi dan pembuatan router Vue 3

Setelah sebelumnya kita telah belajar cara install Vue 3 menggunakan npm, kali ini kita akan membuat konfigurasi router pada Vue 3 Js. 

Step 1 : Install Vue Route

Langkah pertama kita install terlebih dahulu vue router menggunakan perintah berikut

npm install vue-router

Step 2 : Create File Route & Register Vue Route

Kita akan mencoba membuat routing untuk halaman user di Vue 3 Js. Caranya adalah seperti berikut

Buat terlebih file route nya dengan cara buat file dengan nama index.js di dalam folder <nama_project>src/route/index.js. Di dalam file index.js masukkan kode seperti berikut

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
    {
        path: '/',
        name: 'home',
        component: () => import( '../views/Home.vue')
    },
    {
        path: '/user',
        name: 'user.index',
        component: () => import( '../views/user/Index.vue')
    },
    {
        path: '/user/add',
        name: 'user.add',
        component: () => import( '../views/user/Form.vue')
    },
    {
        path: '/user/:id/edit',
        name: 'user.edit',
        component: () => import( '../views/user/Form.vue')
    },
]

const router = createRouter({
    mode: 'history',
    history: createWebHistory(),
    routes // <-- routes,
})

export default router

Buka file main.ts

Tambahkan router ke dalam app Vue agar routing dapat digunakan, dengan cara seperti berikut

//import file route/index.js
import router from './router/index'

createApp(App)
        .use(router)  //tambahkan baris ini
            .mount('#app')

Step 3 : Buat Component

Selanjutnya kita buat component Index.vue dan Form.vue sebagai UI disimpan di folder <nama_project>src/views/user

Index.vue

<script setup></script>
<template>
      <div>
             <h4>Halaman User</h4>
      </div>
</template>

Form.vue

<script setup></script>
<template>
      <div>
             <h4>Halaman Form User</h4>
      </div>
</template>

Buka kembali file App.vue

Import vue router ke dalam App.vue dan tambahkan component <router-view></router-view> 

<script setup>
      import { useRouter } from 'vue-router'
      const router = useRouter()
</script>


<template>
    <div>
             <router-view></router-view>
    </div>
</template>

Jalankan Vue menggunakan perintah npm run dev

Kemudian coba kalian akses alamat http://localhost::5173/user ( sesuaikan dengan port yang kalian gunakan )

Sekian tutorial kali ini. Semoga bermanfaat.

Jika teman-teman memiliki pertanyaan atau saran mengenai artikel ini, jangan ragu untuk meninggalkan komentar pada form di bawah ini.