VueJS - Pengalihan: Panduan Pemula untuk Navigasi di Aplikasi Vue Anda

Hai teman-teman, para master Vue masa depan! Hari ini, kita akan mengemban perjalanan yang menarik melalui dunia pengalihan di Vue. Pikirkan pengalihan seperti GPS dari aplikasi Vue Anda - itu membantu pengguna Anda untuk berpindah dari satu halaman ke halaman lain tanpa benar-benar memuat ulang keseluruhan website. Keren, kan? Mari kita masuk!

Apa Itu Pengalihan Vue?

Imaginasikan Anda sedang membangun sebuah rumah (aplikasi Vue Anda). Anda tentu tidak ingin tamu Anda memasuki rumah melalui jendela setiap kali mereka ingin pergi ke ruangan lain, kan? Itu di mana pengalihan memainkan perannya - itu seperti membuat pintu-pintu yang benar antara ruangan-ruangan aplikasi Anda.

Vue Router adalah pustaka pengalihan resmi untuk Vue.js. Itu memungkinkan Anda untuk memetakan komponen ke berbagai path URL, menciptakan pengalaman aplikasi single-page yang mulus.

Mengatur Vue Router

Pertama-tama, mari kita instal Vue Router. Buka terminal Anda dan jalankan:

npm install vue-router

Sekarang, mari kita buat pengaturan router dasar:

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

Vue.use(VueRouter)

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

const router = new VueRouter({
routes
})

export default router

Dalam pengaturan ini, kita mengimpor Vue dan VueRouter, kemudian mengatakan ke Vue untuk menggunakan VueRouter. Kita menentukan rute kita dalam array, di mana setiap rute adalah objek yang menentukan path, nama, dan komponen untuk dirender.

Menggunakan Router-Link dan Router-View

Sekarang kita sudah mengatur rute kita, bagaimana kita menggunakannya? Masuk <router-link> dan <router-view>.

Router-Link

<router-link> adalah komponen yang memungkinkan pengguna untuk berpindah antar halaman. Itu seperti tag <a> yang diperkuat. Berikut cara Anda menggunakannya:

<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<router-view/>
</div>
</template>

Router-View

<router-view> adalah tempat di mana magik terjadi. Itu adalah komponen yang menampilkan konten rute yang cocok dengan URL saat ini. Pikirkan itu sebagai placeholder tempat komponen Anda akan dirender.

Props untuk Router-Link

Router-Link datang dengan beberapa prop yang memungkinkan Anda untuk menyesuaikan perilakunya. Mari kita lihat beberapa yang paling umum:

Prop	Deskripsi	Contoh
to	Menentukan rute target	<router-link to="/about">About</router-link>
replace	Navigasi tanpa menambahkan entri baru di riwayat	<router-link to="/about" replace>About</router-link>
append	Menambahkan path ke path saat ini	<router-link to="child" append>Child</router-link>
tag	Menentukan tag untuk merender komponen	<router-link to="/about" tag="li">About</router-link>
active-class	Kelas yang diterapkan saat link aktif	<router-link to="/about" active-class="active">About</router-link>
exact	Cocokkan rute secara eksak	<router-link to="/" exact>Home</router-link>

Navigasi Programmatik

kadang-kadang, Anda mungkin ingin menavigasi dari dalam kode JavaScript Anda. Vue Router menyediakan metode untuk hal ini:

// Pergi ke halaman About
this.$router.push('/about')

// Kembali
this.$router.go(-1)

// Ganti entri riwayat saat ini
this.$router.replace('/about')

Pemadanan Rute Dinamis

Seringkali, kita perlu memetakan rute dengan komponen yang sama tetapi dengan parameter yang berbeda. Misalnya, halaman profil pengguna di mana ID pengguna adalah bagian dari URL. Kita dapat mencapai ini dengan segment dinamis di path:

const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
})

Dalam contoh ini, :id adalah segment dinamis. Anda dapat mengaksesnya di komponen Anda melalui this.$route.params.id.

Rute Tertanam

Sebagai aplikasi Anda tumbuh, Anda mungkin ingin menanamkan komponen di dalam komponen lain. Vue Router membuat ini mudah:

const router = new VueRouter({
routes: [
{
path: '/user/:id',
component: User,
children: [
{
path: 'profile',
component: UserProfile
},
{
path: 'posts',
component: UserPosts
}
]
}
]
})

Pengaturan ini memungkinkan URL seperti /user/123/profile dan /user/123/posts.

Guard Navigasi

Terakhir tapi bukan paling kurang penting, mari kita bicarakan guard navigasi. Ini adalah hook yang disediakan oleh Vue Router untuk menjaga navigasi baik melalui pengalihan atau pembatalan. Itu seperti bouncer aplikasi Anda, mengontrol siapa yang bisa masuk dan siapa yang tidak.

Berikut contoh sederhana guard global sebelum:

router.beforeEach((to, from, next) => {
if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
else next()
})

Guard ini memeriksa apakah pengguna sudah terotentikasi sebelum memungkinkan navigasi ke rute manapun kecuali 'Login'.

Dan itu saja, teman-teman! Kita telah mengemban dasar-dasar pengalihan di Vue, dari pengaturan rute sampai menjaganya. Ingat, latihan membuat sempurna, jadi jangan takut untuk mencoba konsep ini di proyek Anda sendiri. Selamat coding, dan semoga rute Anda selalu membawa Anda ke tempat yang Anda inginkan!

Credits: Image by storyset