August 14, 2023 vue

Mengatasi Vue Router Tidak Merender Ulang Ketika Parameter Berubah

Tidaklah dirender ulang suatu vue component ketika ada perubahan pada parameter route.

Misalnya di route /users/:id, ketika user berpindah dari /users/123 ke /users/124, keduanya menggunakan component instance yang sama.

Sehingga lifecycle hook dari component tersebut tidak dijalankan ketika ada perubahan pada parameter route.

Ada beberapa cara untuk mengatasi masalah ini.

Cara 1 : Menambahkan Watch Pada Parameter Route

Cara pertama ini dengan menambahkan watch pada paramter route, yang otomatis dijalankan ketika ada perubahan pada parameter route.

import { watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

watch(route.params.id, () => {
    // do something
})

Cara 2 : Menggunakan beforeRouteUpdate Navigation Guard

Cara kedua ini dengan menggunakan navigation guard beforeRouteUpdate, yang otomatis dijalankan ketika ada yang berubah pada route.

import { onBeforeRouteUpdate } from 'vue-router'

onBeforeRouteUpdate((to, from) => {
    // do something
})

Cara 3 : Menambahkan Parameter Route Pada Key Component

Cara ketika ini dengan menambahkan parameter route pada key component yang ingin otomatis dirender ulang ketika parameter route berubah.

<script setup>
import { useRoute } from 'vue-router'
import { SomeComponent, OtherComponent } from 'src/components'

const route = useRoute()
</script>

<template>
    <div>
        <some-component :key="route.params.id" />
        <other-component />
    </div>
</template>

Ketika parameter id pada route berubah component SomeComponent akan merender ulang, tapi component OtherComponent tidak.

Cara ini bagus karena component yang dirender ulang yang memang perlu saja.

Cara 4 : Menambahkan Key Pada Router View

Cara keempat ini dengan menambahkan path route pada key router view.

Dengan cara ini setiap perubahan pada path route akan merender view.

<script setup>
import { useRoute } from 'vue-router'

const route = useRoute()
</script>

<template>
    <router-view :key="route.path" />
</template>

Cara ini tidak terlalu disarankan karena setiap perubahan pada path route akan merender ulang view, termasuk semua lifecycle dan component di dalam view pun akan dirender ulang, yang mungkin tidak terlalu diperlukan.

Kesimpulan

Cara diatas bisa anda pilih sesuai kebutuhan dan kenyamanan anda, saya sendiri lebih sering menggunakan Cara 1 atau Cara 3, cara 1 jika saya ingin menjalankan sebuah aksi ketika ada perubahan pada parameter route, cara 3 jika sya ingin merender ulang component jika ada perubahan parameter route.

Sumber: