javascript - 单独的 VueJS 子路由

Question

Here is my router.js code:

const router = new Router({
  routes: [
    {
      path: '/login',
      name: 'login',
      component: LoginView,
      meta: {
        title: app.NAME + ' | ' + pages_title.LOGIN_PAGE
      }
    },
    {
      path: '/',
      component: DashboardView,
      redirect: '/dashboard',
      children: [
        {
          path: 'dashboard',
          component: Dashboard,
          name: 'Dashboard',
          meta: { title: app.SMALL_NAME + ' | ' + pages_title.DASHBOARD_PAGE }
        },

        // PRODUCTS START
        // INDEX
        // SHOW
        {
          path: 'product/details/:product_id',
          component: ProductDetails,
          name: 'ProductDetails',
          meta: { title: app.SMALL_NAME + ' | ' + pages_title.PRODUCTS_SHOW_PAGE}
        },
      ]
    }
  ]
});

What I am trying to do:

这段代码运行良好，但我试图在这里找到最佳实践并分离我的 child 路线。

我想将 SHOW 路由和“INDEX”路由分离到一个单独的文件中。

What I have tried to do:

我创建了一个products_routes.js，并向其中添加了此代码。

    let products_routes = [
  {
    path: 'products',
    component: Products,
    name: 'Products',
    meta: { title: app.SMALL_NAME + ' | ' + pages_title.PRODUCTS_PAGE }
  }
];

export default products_routes;

我已将此文件包含在我的主 router.js 文件中..

导入该代码后如何将其注入(inject)到我的 router.js 文件中？

我尝试过这样做:

import products_routes from '@/routes/products_routes';
const router = new Router({
  routes: [
    {
      path: '/login',
      name: 'login',
      component: LoginView,
      meta: {
        title: app.NAME + ' | ' + pages_title.LOGIN_PAGE
      }
    },
    {
      path: '/',
      component: DashboardView,
      redirect: '/dashboard',
      children: [
        {
          path: 'dashboard',
          component: Dashboard,
          name: 'Dashboard',
          meta: { title: app.SMALL_NAME + ' | ' + pages_title.DASHBOARD_PAGE }
        },

        // PRODUCTS START
        // INDEX
        products_routes[0], // HERE I INJECTED MY products routes
        // SHOW
        {
          path: 'product/details/:product_id',
          component: ProductDetails,
          name: 'ProductDetails',
          meta: { title: app.SMALL_NAME + ' | ' + pages_title.PRODUCTS_SHOW_PAGE}
        },
      ]
    }
  ]
});

Answer 1

@Dill 你可以使用相同的方法，想法是创建按类别/组分隔的不同“包”，并执行类似于 vuex 中的模块的操作:

import authRoutes from '@/routes/bundles/authRoutes';
import dashboardRoutes from '@/routes/bundles/dashboardRoutes';
import productRoutes from '@/routes/bundles/productRoutes';

const router = new Router({
  routes: [
   ...authRoutes,
   ...dashboardRoutes,
   ...productRoutes,
  ]
});