Laravel/Vue - 从后端获取路由列表

Question

我在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'
});

这很好用，但正如您所见，我正在为客户端和仅供内部使用的路由加载所有路由。

如何仅在用户客户端或内部使用时加载？任何建议表示赞赏。

提前致谢。

Answer 1

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