Cara Menggunakan Routing Pada Vue JS 3
Dalam panduan ini, kami akan memperlihatkan langkah atur perutean untuk Vue 3 memakai Composition API, Vue Router 4, dan Pokemon OpenAPI.
Prasyarat
- Yarn/npm,
- Vs Code atau Webstorm,
- Pengetahuan dasar tentang JavaScript dan Vue.
mulai
Mari kita awali project Vue.js Router dengan memasang dan membuat project Vue.js baru. Memerlukan Node.js untuk diinstall. Check apa versi node ialah 10.6.0 ataupun lebih baru dengan jalankan perintah berikut ini:
node -v
Bila Anda belum menginstalnya, Anda bisa download di sini. Kami akan memakai Vue CLI untuk hasilkan project Vue.js baru. Anda bisa menginstal dengan perintah berikut ini:
yarn global add @vue/cli
# OR
npm install -g @vue/cli
Untuk MengeChecknya Sudah terinstall secara benar dengan jalankan:
vue --version
Ini akan kembalikan versi Vue CLI. Saat ini mari kita buat project.
Membuka terminal dan masukan perintah berikut untuk membikin project Vue baru.
vue create pokemon-app
Sesudah membuat project, Anda harus pilih paket. Panduan ini memakai Vue 3, babel dan eslint sama dalam gambar berikut ini.
Saat ini silahkan kita ganti direktori ke folder project.
cd pokemon-app
Mulai project dengan perintah berikut ini:
yarn serve
#OR
npm run serve
Anda bisa menyaksikan program berjalan pada http://localhost:8080
Membuat View atau Tampilan
Penampilan ialah elemen yang diperlihatkan saat pemakai berkunjung halaman. Buat tiga penampilan untuk dinavigasi. Satu sama daftar semua Pokemon yang disebutkan PokemonList.vue, satu sama perincian Pokemon yang diputuskan disebutkan PokemonDetails.Vue, dan NotFound.vue. Selanjutnya masuk ke folder src dengan perintah berikut ini:
cd src
Selanjutnya, buat folder tampilan.
mkdir views
Sesudah folder dibuat. Tambah file ini.
- PokemonList.vue,
- PokemonDetails.vue,
- NotFound.vue.
Dalam proyek ini, kami akan menggunakan standar konvensi penamaan BEM dan Sass. Untuk menginstal yang terakhir, jalankan perintah berikut:
yarn add sass-loader
#OR
npm install sass-loader
Hal paling akhir yang penting kita instal ialah (Anda bisa menebaknya) sebuah router. Instal dengan jalankan perintah berikut ini:
yarn add vue-router@4
#OR
npm install vue-router@4
Buat router
Seterusnya, kita perlu membuat router. Yakinkan Anda ada di directory src dan lakukan perintah berikut ini:
mkdir router
Seterusnya, buat file indeks.js dalam folder router Anda dan rekatkan code berikut ini:
import { createRouter, createWebHistory } from 'vue-router';
const routes = [
{
path: "/pokemons",
name: "AllPokemons",
component: () => import('../views/PokemonList.vue')
},
{
path: "/pokemon/:name",
name: "PokemonDetails",
component: () => import('../views/PokemonDetails.vue')
},
{
path: "/:catchAll(.*)",
component: () => import('../views/NotFound.vue')
},
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
Peranan createRouter dan createWebHistory
Pertama, lihat jika path ke detil Pokemon mengikutkan adalah :name Param diartikan oleh :and memungkinkannya Anda untuk merekayasa route berdasar nilainya. Saat sebuah jalur dicocokkan, nilai patokannya inisialisasikan sebagai this.$route.params kesemua elemen. Pencocokan seperti ini membuat jalur jadi aktif.
Anda dapat menyaksikan skema dalam sistem perutean yang ditetapkan. Ini terbagi dalam root, nama, dan elemen. Bukannya panggil elemen langsung, elemen memakai pengakuan import aktif sebagai tukarnya. Karena ini ialah bagaimana lazy loading diterapkan.
Mari kita lihat perbedaannya:
//REGULAR LOADING
{
path: "/pokemon/:name",
name: "PokemonDetails",
component: PokemonDetails
}
//LAZY LOADING
{
path: "/pokemon/:name",
name: "PokemonDetails",
component: () => import('../views/PokemonDetails.vue')
}
Peningkatan bisa mengakibatkan code dan jalur yang kompleks, dan ukuran bundel yang besar . Maka, bukannya berisi semua sekalian, lazy loading memungkinkannya berisi jalur cuma sesudah diundang. Ini tingkatkan performa program dan hasilkan pengalaman pengguna yang lebih bagus.
Tambah Content
Oke, saat ini kita sudah pecahkan permasalahan kita, silahkan kita awali dengan mempersiapkan file PokemonList.vue. Bila Anda menyaksikan document Pokemon API, Anda akan menyaksikan jika https://pokeapi.co/api/v2/pokemon kembalikan array object. Tiap object mempunyai dua property, nama dan url. Template ini cuma tampilkan nama. mari kita persiapkan templatenya.
<template>
<div>
<ul class="pokemon-list">
<li class="pokemon-list__item">
<span> Name: </span>
</li>
</ul>
</div>
</template>
<script>
import { ref } from "vue";
export default {
name: 'PokemonList',
setup() {
const apiUrl = "https://pokeapi.co/api/v2/pokemon/";
let allPokemonsList = ref([]);
return {
allPokemonsList,
};
},
}
</script>
<style lang="scss" scoped>
.pokemon-list {
list-style: none;
width: 50%;
&__item {
background-color: lightgray;
margin: 10px;
padding: 10px;
border-radius: 5px;
}
}
</style>
Saat ini sesudah kita mempersiapkan template dasar, kita perlu memperoleh data dari API untuk content allPokemonsList. Untuk lakukan ini, tambah code berikut ke skrip Anda.
<script>
import { onMounted, ref } from "vue";
export default {
name: 'PokemonList',
setup() {
const apiUrl = "https://pokeapi.co/api/v2/pokemon/";
let allPokemonsList = ref([]);
onMounted(() => {
fetchPokemons();
});
const fetchPokemons = () => {
fetch(apiUrl)
.then((response) => response.json())
.then((data) => {
allPokemonsList.value = data.results;
});
};
return {
allPokemonsList,
fetchPokemons,
};
},
}
</script>
Menambahkan onMounted ke skrip. Ini merupakan lifecyscle Vue yang panggil sistem fetchPokemons saat elemen terpasang (elemen terpasang saat dibikin dan disuntikkan ke DOM).
Saat ini kita perlu mengupdate template untuk tampilkan data yang diambil. Berikut template yang diperbaharui:
<template>
<div>
<ul class="pokemon-list">
<li v-for="pokemon in allPokemonsList" :key="pokemon.name"
class="pokemon-list__item">
<router-link :to="'/pokemon/' + pokemon.name">
<span> Name: {{ pokemon.name }}</span>
</router-link>
</li>
</ul>
</div>
</template>
Menambah v-for loop yang melalui semua pokemon yang Anda peroleh dan tampilkan namanya. Bukannya tag anchor, saya memakai elemen link router Vue Router. Elemen mempunyai :to prop yang terima pasangan nilai kunci. Ada dua langkah untuk memakai elemen link-router: property path (yang kita pakai) dan namanya route.
Berikut bedanya:
//USING PATH PROPERTY
<router-link :to="'/pokemon/' + pokemon.name">
<span> Name: {{ pokemon.name }}</span>
</router-link>
//USING NAMED ROUTES
<router-link :to="{ name: 'PokemonDetails', params: { name: pokemon.name }}">
<span> Name: {{ pokemon.name }}</span>
</router-link>
Pendekatan routes bernama membutuhkan dua nama properti yang mewakili nama route dan params yang mewakili segala jenis parameter untuk diteruskan ke route. Karena kami memiliki sejumlah kecil route, memperbarui nama route tidak menjadi masalah, tetapi dalam aplikasi yang lebih kompleks, mengubah nama URL dan kemudian secara manual memperbarui tempat penggunaannya bisa jadi membosankan.
Kembali ke kode Anda, pada titik ini file PokemonList.vue Anda akan terlihat seperti ini:
<template>
<div>
<ul class="pokemon-list">
<li v-for="pokemon in allPokemonsList" :key="pokemon.name"
class="pokemon-list__item">
<router-link :to="{ name: 'PokemonDetails', params: { name: pokemon.name }}">
<span> Name: {{ pokemon.name }}</span>
</router-link>
</li>
</ul>
</div>
</template>
<script>
import { onMounted, ref } from "vue";
export default {
name: 'PokemonList',
setup() {
const apiUrl = "https://pokeapi.co/api/v2/pokemon/";
let allPokemonsList = ref([]);
onMounted(() => {
fetchPokemons();
});
const fetchPokemons = () => {
fetch(apiUrl)
.then((response) => response.json())
.then((data) => {
allPokemonsList.value = data.results;
});
};
return {
allPokemonsList,
fetchPokemons,
};
},
}
</script>
<style lang="scss" scoped>
.pokemon-list {
list-style: none;
width: 50%;
&__item {
background-color: lightgray;
margin: 10px;
padding: 10px;
border-radius: 5px;
}
}
</style>
Sekarang kita juga perlu menambahkan kode untuk PokemonDetails.vue.
<template>
<div>
<div class="pokemon-details">
<h1> {{ pokemonDetails.name }}</h1>
<button class="back-btn" @click="$router.back()">Go back</button>
<h2>Abilities</h2>
<ul class="pokemon-details__abilities">
<li v-for="item in pokemonDetails.abilities" :key="item.name">
<span>{{ item.ability.name }}</span>
</li>
</ul>
<h2>Moves</h2>
<ul class="pokemon-details__moves">
<li v-for="item in pokemonDetails.moves" :key="item.name">
<span>{{ item.move.name }}</span>
</li>
</ul>
</div>
</div>
</template>
<script>
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
export default {
name: 'PokemonDetails',
setup() {
const apiUrl = "https://pokeapi.co/api/v2/pokemon/";
const route = useRoute();
let pokemonDetails = ref({});
onMounted(() => {
fetchPokemonDetails();
});
const fetchPokemonDetails = () => {
fetch(apiUrl + route.params.name)
.then((response) => response.json())
.then((data) => {
pokemonDetails.value = data;
});
};
return {
pokemonDetails,
fetchPokemonDetails,
};
},
}
</script>
<style lang="scss" scoped>
.pokemon-details {
width: 30%;
text-align: left;
padding: 10px;
&__abilities {
padding-left: 0;
list-style: none;
}
&__moves {
padding-left: 0;
list-style: none;
}
li {
margin: 10px;
padding: 10px;
border-radius: 5px;
border-bottom: 1px solid grey;
}
}
</style>
Ini sangat mirip dengan komponen PokemonList.vue, tetapi Anda mungkin telah memperhatikan penambahan tombol kembali kecil di bagian atas komponen.
Sekarang kita juga perlu menambahkan template ke komponen NotFound.vue.
<template>
<div>
<h1>
Sorry, this page doesn't exist or has been moved to another location
</h1>
</div>
</template>
Jadi ini dia. Aplikasi Anda harus sudah siap. Saya harap Anda menemukan artikel ini bermanfaat.