Question

这是我的 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}
        },
      ]
    }
  ]
});

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

单独的VueJS子路线

1 个答案: