单独的 VueJS children 路由

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:

此代码运行良好，但我正在尝试在这里找到最佳实践并分离我的 children 路由。

我想在单独的文件中将 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 文件中..

如何在导入后将该代码注入我的 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 你可以使用相同的方法，想法是创建不同的 "bundles" 分隔 categories/groups 并在 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,
  ]
});

单独的 VueJS children 路由

Separate VueJS children routes

javascript

ecmascript-6

vue.js

vue-router

vuejs2