مقدمه‌ای بر Vue Router
Vue Router یک کتابخانه رسمی برای ویو جی‌اس (Vue.js) است که امکان مدیریت مسیرها و ناوبری بین کامپوننت‌ها را در برنامه‌های تک صفحه‌ای (SPA) فراهم می‌کند. اهمیت آن در این است که به توسعه‌دهندگان اجازه می‌دهد بدون بارگذاری مجدد کل صفحه، محتوا و کامپوننت‌های مختلف را نمایش دهند و تجربه کاربری بهتری ایجاد کنند.
زمان استفاده از Vue Router زمانی است که برنامه شما شامل چندین نما یا صفحه مانند داشبورد، پروفایل کاربری یا صفحه محصولات باشد. با استفاده از Vue Router می‌توان هر مسیر URL را به یک کامپوننت اختصاص داد. این کتابخانه از مسیرهای داینامیک، مسیرهای تو در تو و Navigation Guards پشتیبانی می‌کند که باعث می‌شود منطق ناوبری و منطق کامپوننت از هم جدا و خوانا باقی بمانند.
در این آموزش شما با مفاهیم پایه ویو جی‌اس (Vue.js) شامل سینتکس کامپوننت‌ها، ساختار داده‌ها، الگوریتم‌های مسیر‌یابی و اصول برنامه‌نویسی شیءگرا آشنا خواهید شد. در پایان قادر خواهید بود مسیرهای ساده را تنظیم کرده، مسیرهای داینامیک ایجاد کنید و props را بین کامپوننت‌ها عبور دهید.
مثال پایه
textimport { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
const Home = { template: '<h2>صفحه اصلی</h2>' }
const About = { template: '<h2>درباره ما</h2>' }
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
const router = createRouter({
history: createWebHistory(),
routes
})
const app = createApp({})
app.use(router)
app.mount('#app')در این مثال ابتدا createApp و createRouter از ویو جی‌اس و Vue Router وارد شدند. دو کامپوننت ساده Home و About ساخته شده‌اند که فقط دارای template هستند.
آرایه routes مسیرهای URL را به کامپوننت‌ها متصل می‌کند. سپس با createRouter یک نمونه Router ساخته شده که از createWebHistory برای فعال‌سازی ناوبری SPA بدون رفرش کامل صفحه استفاده می‌کند. در نهایت با استفاده از app.use(router) Router به برنامه اضافه و با app.mount('#app') روی DOM سوار می‌شود.
این مثال مفاهیم پایه Vue Router را نشان می‌دهد: تعریف مسیرها، اتصال مسیرها به کامپوننت‌ها، ساخت Router و اتصال آن به اپلیکیشن.
مثال کاربردی
textimport { createApp, defineComponent } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
const Home = defineComponent({
template: '<div><h2>صفحه اصلی</h2><p>به وبسایت خوش آمدید!</p></div>'
})
const Profile = defineComponent({
props: ['username'],
template: '<div><h2>پروفایل</h2><p>سلام، {{ username }}!</p></div>'
})
const routes = [
{ path: '/', component: Home },
{ path: '/profile/:username', component: Profile, props: true }
]
const router = createRouter({
history: createWebHistory(),
routes
})
const app = createApp({})
app.use(router)
app.mount('#app')در این مثال defineComponent استفاده شده و کامپوننت Profile با props، نام کاربری را از مسیر URL دریافت می‌کند. مسیر '/profile/:username' یک مسیر داینامیک است. این روش در برنامه‌های واقعی برای نمایش پروفایل یا محتوای شخصی کاربران مفید است.
استفاده از props باعث می‌شود کامپوننت‌ها ماژولار و نگهداری آنها آسان باشد. همچنین این روش توسعه SPA با تجربه کاربری بهتر را ممکن می‌کند.
بهترین روش‌ها برای استفاده از Vue Router شامل ساختار واضح مسیرها، عبور داده‌ها از طریق props و اجتناب از دستکاری مستقیم پارامترهای URL است. اشتباهات رایج شامل مسیرهای نامفهوم، مدیریت ضعیف state در کامپوننت‌ها و کامپوننت‌های بزرگ که باعث نشت حافظه و مشکلات عملکرد می‌شوند.
برای دیباگ می‌توان از Vue DevTools استفاده کرد. برای بهینه‌سازی عملکرد می‌توان از Lazy Loading، Navigation Guards و الگوریتم‌های مسیر‌یابی بهینه استفاده کرد. از نظر امنیت، باید پارامترهای URL را اعتبارسنجی و escape کرد.
📊 جدول مرجع
| ویو جی‌اس (Vue.js) Element/Concept | Description | Usage Example |
|---|---|---|
| Router | مدیریت تمام مسیرهای برنامه | const router = createRouter({ history: createWebHistory(), routes }) |
| Route | اتصال مسیر URL به کامپوننت | { path: '/about', component: About } |
| Props | انتقال پارامترهای مسیر به کامپوننت | { path: '/profile/:username', component: Profile, props: true } |
| createWebHistory | فعال‌سازی ناوبری SPA با HTML5 History API | history: createWebHistory() |
| Navigation Guards | کنترل دسترسی به مسیرها در هنگام ناوبری | router.beforeEach((to, from, next) => { next() }) |
پس از یادگیری Vue Router، شما قادر خواهید بود مسیرهای داینامیک ایجاد کرده، داده‌ها را بین کامپوننت‌ها انتقال دهید و ناوبری برنامه را کنترل کنید. گام بعدی می‌تواند یادگیری Lazy Loading، مسیرهای تو در تو و Navigation Guards برای افزایش عملکرد و امنیت باشد.
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود