分离 VueJS 子路由答案

【问题标题】：Separate VueJS children routes分离 VueJS 子路由
【发布时间】：2018-09-04 15:53:42
【问题描述】：

这是我的 router.js 代码：

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}
        },
      ]
    }
  ]
});

我想做什么：

此代码运行良好，但我正在尝试在这里找到最佳做法并将我的子路由分开。

我想将 SHOW 路线和“INDEX”路线分开在一个单独的文件中..

我试图做的事情：

我已经创建了一个 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 文件中..

如何在我的 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}
        },
      ]
    }
  ]
});

【问题讨论】：

尝试使用 es6 desctructoring，会是这样的：products_routes[0], will be...products_routes[0],
@kalidou.diagne 这是一个非常好的解决方案，它解决了我的问题。但是有没有更好的方法让我达到我想要的或者这是一个好主意？您也可以将其发布为答案

标签： javascript vue.js ecmascript-6 vuejs2 vue-router

【解决方案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,
  ]
});

【讨论】：