How to set vue-router nested routes like a children

Question

I'm trying to put a router that is imported as a constant in main router`s children

router/components/slider/index.js :

const sliderRouter = {
    path: '/slider',
    name: 'Slider',
    meta: {
        title: 'Slider'
    },
    component: () => import('@/views/components/slider'),
}

export default sliderRouter

router/index.js :

...

import authRouter from './modules/auth'
import sliderRouter from './modules/components/slider'

...

export default new Router({
    mode: 'history',
    linkActiveClass: "active selected",
    routes: [
        authRouter, // this work
        {
            path: '/admin',
            name: 'primary',
            meta: { requiresAuth: true },
            // remastered version
            component: loadView('MainLayout'),
            children: [
                sliderRouter,  /* make something like this */
                //recent routes
                {
                    path: '/home',
                    name: 'home',
                    // route level code-splitting
                    // this generates a separate chunk (about.[hash].js) for this route
                    // which is lazy-loaded when the route is visited.
                    // classic version:
                    component: () => import(/* webpackChunkName: "about" */ '../views/Home.vue')
                    // component: About
                }
            ]
        },

Is it really possible to make the slider router work in such way and inherit from the MainLayout (like a typical child), and also URL would be '/admin/slider'?

Answer 1

I solved it by changing the path in the slider

path: '/slider',

to

path: 'slider',

because it is using like child route which does not require a slash before it`s name