لود کردن روت های Vue از پوشه های مختلف

نکته: من به شدت پیشنهاد میکنم نسخه اصلی مقاله به زبان انگلیسی رو بخونید.

مدتی پیش که در تلاش برای پیاده سازی یک ساختار پوشه بندی مقیاس پذیر برای پروژه های Vue بودم مجبور به پیدا کردن راه حلی برای برای لود کردن فایل های route از پوشه های مختلف شدم.

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

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar },
  // and so on...
]

const router = new VueRouter({
  routes // short for `routes: routes`
})

ممکن است این روش برای پروژه های کوچک مناسب باشد ولی وقتی که پروژه شما بزرگتر شد، فایل روت شما هم به نسبت بزرگ تر و کم کم نگهداری آن هم سخت تر می شود.

برای مثال فکر کنیم این ساختار پروژه ما هست:

/src
  /modules
    /auth
    /dashboard
         /components
               /pages
               /routes
                     index.js  
  /store  
   /home
   /profile
   /...

حالا نگاهی به محتوای فایل src/modules/dashboard/routes/index.js می اندازیم:

export default [
  {
    path: '/dashboard',
    name: 'dashboard',
    component: DashboardPage,
  }
]

در این فایل ما فقط روت های مرتبط با داشبورد (پوشه ای که فایل در آن قرار دارد) را تعریف می کنیم. حالا سوال اینجاست که چگونه میتوانیم این روت ها را رجیستر کنیم به طوری که اَپ ما بتواند آنها را تشخیص بدهد؟

متوانیم آنها را به طور داینامیک به صورت زیر با router رجیستر کنیم:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

// Define base routes here
const baseRoutes = [
  {
    path: '/',
    name: 'index',
    redirect: { name: 'home' }
  },
  {
    path: '*',
    redirect: '/404'
  }
]

// Import all of the resource routes files.
function loadRoutes () {
  const context = require.context('@/modules', true, /routes/index.js$/i)
  return context.keys()
    .map(context) // import module
    .map(m => m.default) // get `default` export from each resolved module
}

const resourceRoutes = loadRoutes()

resourceRoutes.forEach((route) => {
  for (let i = 0; i < route.length; i++) {
    baseRoutes.push(route[i])
  }
})

const router = new VueRouter({
  mode: 'history',
  // base: process.env.BASE_URL,
  // linkActiveClass: 'active',
  scrollBehavior () {
    return { x: 0, y: 0 }
  },
  routes: baseRoutes
})

export default router

بگذارید این قسمت از کد, در فانکشن loadRoutes() را بیشتر بررسی کنیم:

require.context(‘@/modules’, true, /routes/index.js$/i)

در اینجا require.context() یک ماژول context را برمی گرداند که آن ماژول هم یک فانکشن به نام keys دارد که آرایه ای از تمام روت های مطابق با رج اِکسی که نوشته ایم را برمی گرداند. در آخر آرایه ای که فانکشن loadRoutes() برمی گرداند به شکل زیر است:

resourceRoutes = [
  {
    0: [
          {
            path: '/dashboard',
            name: 'dashboard',
            component: {
             name: 'DashboardPage',
             ...
           }
        ]
  },
  {
    1: [
          ...
        ]
  },
{
    2: [
          ...
        ]
  },
...
]

سپس ما بر روی تمامی نتایج حقله ای میزنیم و اولین آیتم هر آرایه را برمی گردانیم و آن را به آرایه روت ها اضافه میکنیم.

با این روش ما می توانیم اَپلیکیشنی ماژولار و مقیاس پذیر داشته باشیم.

مرا در توییتر دنبال کنید Mohammad Alavi