Vue.js-router what is the best way

i am developing vue.js frontend on laravel.
i want to know best way grouping router. because i will make application router group and admin router group. so here is my router declation.

let routes = [
    { path: '/404', alias: '*', component: Vue.component('main-vue', require('./components/PageNotFound').default) },
    { path: '*', redirect: '/404' },

    /*
     * App Routes
     */
    {
        path: '/',
        component: Vue.component('main-vue', require('./pages/app/Main').default),
        children: [
            // AUTH
            {path: '', component: require('./pages/app/home/Home').default, beforeEnter: notRequireAuth()},
            {path: 'signup', component: require('./pages/app/auth/SignUp').default, beforeEnter: notRequireAuth()},
            {path: 'signin', component: require('./pages/app/auth/SignIn').default, beforeEnter: notRequireAuth()},
            // /*
            //   Catch Alls
            // */
            // { path: '_=_', redirect: '/' }
        ]
    },



    /*
     * Admin routes
     */
    {
        path: '/admin',
        component: Vue.component('main-vue', require('./pages/admin/Main').default),
        children: [
            {path: '', component: require('./pages/admin/home/Home').default, beforeEnter: notRequireAuth()},
            {path: 'signin', component: require('./pages/admin/auth/SignIn').default, beforeEnter: notRequireAuth(AUTH_TYPE.ADMIN)},
            // /*
            //   Catch Alls
            // */
            // { path: '_=_', redirect: '/' }
        ]
    },
]

there ‘main-vue’ component is my laravel project’s app blade component.

my router is working. but!
always main-vue render admin/Main with app/Main not even ‘/admin’ group.

can you help or give some advice to me?

1 Like