راهنمای کامل Vue Router در Vue.js

Vue Router یک کتابخانه رسمی برای مسیریابی (Routing) در Vue.js است که به ما امکان می‌دهد صفحات مختلف را بدون نیاز به رفرش صفحه مدیریت کنیم.

1. نصب Vue Router

اگر Vue Router را نصب نکرده‌اید، می‌توانید از طریق NPM آن را اضافه کنید:

npm install vue-router@4

Vue Router 4 مخصوص Vue 3 است. اگر از Vue 2 استفاده می‌کنید، باید نسخه 3 را نصب کنید.

2. ایجاد فایل روتر

یک فایل جدید به نام router.js در پوشه src ایجاد کنید و مسیرها را تعریف کنید:

import { createRouter, createWebHistory } from "vue-router";

import Home from "./views/Home.vue";

import About from "./views/About.vue";

const routes = [

  { path: "/", component: Home },

  { path: "/about", component: About }

];

const router = createRouter({

  history: createWebHistory(),

  routes

});

export default router;

3. اضافه کردن روتر به Vue App

حالا باید router.js را در main.js اضافه کنیم:

import { createApp } from "vue";

import App from "./App.vue";

import router from "./router";

const app = createApp(App);

app.use(router);

app.mount("#app");

4. تعریف کامپوننت‌های صفحات

داخل پوشه views/، دو فایل Home.vue و About.vue ایجاد کنید.

Home.vue:

<template>

  <div>

    <h1>صفحه اصلی</h1>

  </div>

</template>

About.vue:

<template>

  <div>

    <h1>درباره ما</h1>

  </div>

</template>

5. نمایش کامپوننت‌ها با <router-view>

در App.vue، از <router-view> برای نمایش صفحه مربوط به هر مسیر استفاده کنید:

<template>

  <nav>

    <router-link to="/">خانه</router-link> |

    <router-link to="/about">درباره ما</router-link>

  </nav>

  <router-view></router-view>

</template>

نکات مهم:

<router-link> به جای <a> استفاده می‌شود تا بدون رفرش صفحه مسیر تغییر کند.
<router-view> مشخص می‌کند که هر صفحه در کجا نمایش داده شود.

6. مسیرهای داینامیک (Dynamic Routes)

اگر بخواهید یک مسیر داینامیک مثل نمایش پروفایل کاربران داشته باشید، می‌توانید از پارامترهای مسیر استفاده کنید.

تعریف مسیر داینامیک در router.js:

const routes = [

  { path: "/user/:id", component: UserProfile }

];

استفاده از پارامتر مسیر در UserProfile.vue:

<template>

  <div>

    <h1>پروفایل کاربر</h1>

    <p>آیدی کاربر: {{ $route.params.id }}</p>

  </div>

</template>

7. تغییر مسیر (Redirect) و مسیرهای پیش‌فرض (Catch-All)

گاهی لازم است مسیرها را به یک مسیر دیگر هدایت کنیم یا مسیرهای نامعتبر را مدیریت کنیم.

اضافه کردن تغییر مسیر در router.js:

const routes = [

  { path: "/home", redirect: "/" },

  { path: "/:pathMatch(.*)*", component: NotFound }

];

ایجاد صفحه NotFound.vue:

<template>

  <div>

    <h1>صفحه مورد نظر یافت نشد!</h1>

  </div>

</template>

8. گاردهای مسیریابی (Navigation Guards)

می‌توان قبل از ورود یا خروج از یک مسیر، دستورات خاصی اجرا کرد. مثلا بررسی احراز هویت:

const routes = [

  {

    path: "/dashboard",

    component: Dashboard,

    beforeEnter: (to, from, next) => {

      const isAuthenticated = false;

      if (!isAuthenticated) {

        next("/");

      } else {

        next();

      }

    }

  }

];

9. اسکرول به بالا هنگام تغییر مسیر

به‌صورت پیش‌فرض، Vue Router موقع تغییر مسیر، اسکرول را به موقعیت قبلی نگه می‌دارد. اگر بخواهید همیشه به بالای صفحه برود:

const router = createRouter({

  history: createWebHistory(),

  routes,

  scrollBehavior() {

    return { top: 0 };

  }

});

جمع‌بندی

✔ Vue Router برای مدیریت مسیرها در Vue استفاده می‌شود.
✔ مسیرها را در router.js تعریف کرده و در main.js ثبت می‌کنیم.
✔ از <router-view> و <router-link> برای نمایش صفحات و لینک‌ها استفاده می‌شود.
✔ می‌توان مسیرهای داینامیک، تغییر مسیر، و گاردهای امنیتی را تعریف کرد.