VueJS - Pelan Rute: Panduan Pemula untuk Menavigasi Aplikasi Vue Anda

Hai sana, para master Vue masa depan! Hari ini, kita akan melaksanakan sebuah perjalanan menarik melalui dunia rute Vue. Ber fikirkan rute sebagai GPS aplikasi Vue anda - ia membantu pengguna anda untuk menavigasi dari satu halaman ke halaman lain tanpa benar-benar memuat ulang keseluruhan website. Menarik, kan? Mari kita masuk!

Apa Itu Pelan Rute Vue?

Imajinasi anda sedang membangun sebuah rumah (aplikasi Vue anda). Anda tentu tidak mau tamu anda memasuki rumah melalui jendela setiap kali mereka ingin pergi ke ruang lain, kan? Itulah dimana rute memainkan perannya - ia seperti membuat pintu yang sesuai antara ruang-ruang aplikasi anda.

Vue Router adalah pustaka rute resmi untuk Vue.js. Ia membolehkan anda memetakan komponen ke pelbagai path URL, mencipta pengalaman aplikasi halaman tunggal yang lancar.

Menyiapkan Pelan Rute Vue

Pertama-tama, mari kita pasang Vue Router. Buka terminal anda dan jalankan:

npm install vue-router

Sekarang, mari kita buat pengaturan rute 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 mengimport Vue dan VueRouter, kemudian memberitahu Vue untuk menggunakan VueRouter. Kita tentukan rute-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 menyiapkan rute-rute kita, bagaimana kita menggunakannya? Masuk <router-link> dan <router-view>.

Router-Link

<router-link> adalah komponen yang membolehkan pengguna untuk menavigasi antara halaman. Ia seperti <a> tag yang diperkuat. Berikut cara penggunaannya:

<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 di mana magik berlaku. Ia adalah komponen yang menampilkan kandungan rute yang sepadan dengan URL saat ini. Ber fikirkan ia sebagai tempat cadangan di mana komponen anda akan dirender.

Properti untuk Router-Link

Router-Link datang dengan beberapa properti yang membolehkan anda menyesuaikan tingkah lakuannya. Mari kita lihat beberapa yang paling umum:

Prop	Deskripsi	Contoh
to	Menentukan rute target	<router-link to="/about">About</router-link>
replace	Menavigasi tanpa menambah entri baru ke riwayat	<router-link to="/about" replace>About</router-link>
append	Menambah path ke path saat ini	<router-link to="child" append>Child</router-link>
tag	Menentukan tag mana yang akan digunakan untuk 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	Menentukan rute secara tepat	<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 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 Dinamik

Seringkali, kita perlu memetakan rute dengan komponen yang sama tetapi dengan parameter yang berbeza. Sebagai contoh, halaman profil pengguna di mana ID pengguna adalah sebahagian dari URL. Kita dapat mencapai ini dengan segmen dinamik dalam path:

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

Dalam contoh ini, :id adalah segmen dinamik. Anda dapat mengaksesnya dalam komponen anda melalui this.$route.params.id.

Rute Tertanam

Begitu 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 membolehkan URL seperti /user/123/profile dan /user/123/posts.

Penjaga Navigasi

Terakhir tetapi bukan yang paling kurang, mari kita bicarakan penjaga navigasi. Ini adalah hook yang disediakan oleh Vue Router untuk menjaga navigasi baik melalui pengalihan atau pembatalan. Mereka seperti penjaga aplikasi anda, mengawal siapa yang boleh masuk dan siapa yang tidak.

Berikut adalah contoh sederhana penjaga sebelum global:

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

Penjaga ini memeriksa jika pengguna sudah disahkan sebelum membolehkan navigasi ke mana-mana rute kecuali 'Login'.

Dan itulah dia, teman-teman! Kita telah melintasi dasar-dasar pelan rute Vue, dari menyiapkan rute hingga menjaganya. Ingat, latihan membuat ahli, jadi jangan takut untuk mencoba konsep ini dalam projek anda sendiri. Selamat coding, dan semoga rute-rute anda selalu membawa anda ke tempat yang anda inginkan!

Credits: Image by storyset