Отдельные детские маршруты VueJS - PullRequest
Новая
       22

Отдельные детские маршруты VueJS

0 голосов
/ 04 сентября 2018

Вот мой 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}
        },
      ]
    }
  ]
});

1 Ответ

0 голосов
/ 05 сентября 2018

@ Дилль, вы можете использовать один и тот же метод, и идея состоит в том, чтобы создавать разные «связки», разделенные по категориям / группам, и делать что-то вроде модулей в 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,
  ]
});
...