javascript - Laravel/Vue - Get list of routes from backend

I have this router code in resources/js/router.js

import Vue from 'vue';
import VueRouter from 'vue-router';

import ClientFeature1 from './components/ClientFeature1';
import ClientFeature2 from './components/ClientFeature2';
import InternalFeature1 from './components/InternalFeature1';
import InternalFeature2 from './components/InternalFeature2';

Vue.use(VueRouter);

export default new VueRouter({
    routes : [
        { path : '/client-1', component : ClientFeature1, name : "Client Feature 1" },
        { path : '/client-2', component : ClientFeature2, name : "Client Feature 2" },
        { path : '/internal-1', component : InternalFeature1, name : "Internal Feature 1" },
        { path : '/internal-2', component : InternalFeature2, name : "Internal Feature 2" }
    ],
    mode: 'hash'
});

This works just fine but as you can see, I'm loading all the routes for both clients and internal use only routes.

How can I load only when user client or being used internally? Any advice is appreciated.

Thanks in advance.

Answer

Solution:

export default new VueRouter({
    routes : [
        {
          path : '/client-1',
          name : "Client Feature 1" 
          // component : ClientFeature1, //asis
          component: () => import(/* webpackChunkName: 'ClientFeature1' */'./components/ClientFeature1')
         },
         // ...
    ],
    mode: 'hash'
});

Source