مسیریابی (Routing)
«مسیریابی (Routing)» یعنی جابه جایی بخش های برنامه تک صفحه ای. صفحه کامل رفرش نمی شود. پس تجربه سریع تر می شود؛ مثل عوض کردن تب های گوشی.
درک مسیریابی با کامپوننت پویا
اول ساده نگاه کنیم. یک «کامپوننت پویا (Dynamic Component)» بین دو بخش جابه جا می شود. اما لینک مستقیمی برای هر بخش نداریم.
<template>
<p>Choose what part of this page you want to see:</p>
<button @click="activeComp = 'animal-collection'">Animals</button>
<button @click="activeComp = 'food-items'">Food</button><br>
<div>
<component :is="activeComp"></component>
</div>
</template>
<script>
export default {
data() {
return {
activeComp: ''
};
}
};
<\/script>
<style scoped>
button {
padding: 5px;
margin: 10px;
}
div {
border: dashed black 1px;
padding: 20px;
margin: 10px;
display: inline-block;
}
<\/style>
از کامپوننت پویا تا مسیریابی Vue
در SPA فقط یک فایل HTML داریم. بنابراین لینک جدا نداریم. با «مسیریابی Vue» هر بخش آدرس مخصوص می گیرد؛ مثل /food یا /animals.
1) نصب کتابخانه Vue Router
npm install vue-router@4
2) ساخت Router در main.js
یک «روتر (Router)» می سازیم. سپس مسیرها را تعریف می کنیم. تاریخچه مرورگر هم مدیریت می شود.
import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import App from './App.vue';
import FoodItems from './components/FoodItems.vue';
import AnimalCollection from './components/AnimalCollection.vue';
const router = createRouter({
history: createWebHistory();
routes: [
{ path: '/animals', component: AnimalCollection };
{ path: '/food', component: FoodItems };
];
});
const app = createApp(App);
app.use(router);
app.mount('#app');
3) استفاده از <router-view>
حالا خروجی روتر باید جایی رندر شود. به جای کامپوننت پویا، از <router-view> استفاده کن.
<template>
<p>Choose what part of this page you want to see:</p>
<button @click="activeComp = 'animal-collection'">Animals</button>
<button @click="activeComp = 'food-items'">Food</button><br>
<div>
<router-view></router-view>
</div>
</template>
4) لینک سازی با <router-link>
دکمه ها را با «روتر لینک (router-link)» عوض کن. دیگر state اضافی نمی خواهیم.
<template>
<p>Choose what part of this page you want to see:</p>
<router-link to="/animals">Animals</router-link>
<router-link to="/food">Food</router-link><br>
<div>
<router-view><\/router-view>
<\/div>
<\/template>
5) استایل دهی لینک فعال
روتر به لینک فعال کلاس می دهد. می توانی استایل ویژه بدهی.
<template>
<p>Choose what part of this page you want to see:</p>
<router-link to="/animals">Animals</router-link>
<router-link to="/food">Food</router-link><br>
<div>
<router-view><\/router-view>
<\/div>
<\/template>
<style scoped>
a {
display: inline-block;
background-color: black;
border: solid 1px black;
color: white;
padding: 5px;
margin: 10px;
}
a:hover,
a.router-link-active {
background-color: rgb(110, 79, 13);
}
div {
border: dashed black 1px;
padding: 20px;
margin: 10px;
display: inline-block;
}
<\/style>
نکته: مسیریابی داخل مرورگر انجام می شود. بنابراین جابه جایی سریع می ماند.
پیوندهای مفید
مسیریابی Vue | Provide/Inject | هوک های چرخه عمر
جمع بندی سریع
- SPA یعنی یک HTML و مسیرهای زیاد.
- <router-view> خروجی مسیرها را نشان می دهد.
- <router-link> لینک تمیز و تاریخچه می دهد.
- هر مسیر، کامپوننت مخصوص دارد.