مسیردهی پیشرفته در Nuxt

فرض کنید با nuxt در حال پیاده سازیه صفحه لیست محصولات یه دسته بندی هستین

آدرس صفحه لیست اینجوریه:

/{category}/{page}

که ممکن شماره صفحه هم وجود نداشته باشه و آدرس به این شکل باشه:

/{category}

آدرس صفحه هر محصول هم اینجوریه:

/{category}/{product}

یه روش مرسوم که اکثریت برای پیاده سازی این صفحات استفاده میکنند اینه که کامپوننت های CategoryList و Product رو توی پوشه components میسازن و اونو توی صفحات صدا میزن؛ یعنی:

// pages/[category]/index.vue
<template>
    <CategoryList />
</template>

// pages/[category]/[param].vue
<template>
    <CategoryList v-if=&quotisNumber($route.params.param)&quot />
    <Product v-else />
</template>

برای پیاده سازی بهتر باید توی صفحه دوم از LazyCategoryList و LazyProduct استفاده بشه.

اما یه روش بهتری وجود داره برای پیاده سازی با Router Options.

برای استفاده از Router Options شما صفحاتتون رو اینجوری پیاده میکنید:

// pages/[category]/index.vue
<template>
    <CategoryList />
</template>

// pages/[category]/[product].vue
<template>
    <Product />
</template>

و یه فایل توی پوشه app به نام router.options.ts (یا پسوند .js) با مقادیر زیر میسازید:

import type { RouterConfig } from '@nuxt/schema'
export default <RouterConfig>{
    routes: (_routes) => [
        ..._routes,
        {
            name: 'category-page',
            path: '/:category/:page(\\d+)',
            component: () =>
               import('~/pages/[category]/index.vue').then((r) => r.default || r),
            },
    ],
};

با این روش زمانیکه کاربر مثلا آدرس /category/2 رو وارد کنه صفحه pages/[category]/index.vue صدا زده میشه و اگه چنین مسیری وارد بشه /category/product صفحه pages/[category]/[product].vue صدا زده میشه.

برای گرفتن شماره صفحه وارد شده داخل URL توی صفحه category از ‍‍‍`useRoute().params.page` استفاده میکنیم.

اگه دوست دارید بیشتر در این مورد بدونید از لینک های زیر استفاده کنید:

https://nuxt.com/docs/guide/recipes/custom-routing

https://router.vuejs.org/guide/essentials/dynamic-matching.html