https://virgool.ir/feed/@alireza-abیه برنامه نویس عاشق یادگیری (https://t.me/alireza_alibeiki_ch)fa2026-11-10 22:18:18https://files.virgool.ir/upload/users/211954/avatar/fQMxN3.jpghttps://virgool.ir/@alireza-abhttps://virgool.ir/@alireza-ab/advanced-routing-in-nuxt-rnywfhmel2zaفرض کنید با nuxt در حال پیاده سازیه صفحه لیست محصولات یه دسته بندی هستینآدرس صفحه لیست اینجوریه:/{category}/{page}که ممکن شماره صفحه هم وجود نداشته باشه و آدرس به این شکل باشه:/{category}آدرس صفحه هر محصول هم اینجوریه:/{category}/{product}یه روش مرسوم که اکثریت برای پیاده سازی این صفحات استفاده میکنند اینه که کامپوننت های CategoryList و Product رو توی پوشه components میسازن و اونو توی صفحات صدا میزن؛ یعنی:// pages/[category]/index.vue <template> <CategoryList /> </template>// pages/[category]/[param].vue <template> <CategoryList v-if="isNumber($route.params.param)" /> <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-routinghttps://router.vuejs.org/guide/essentials/dynamic-matching.htmlعلیرضا علی بیکیعلیرضا علی بیکیThu, 16 May 2024 11:24:24 +0330