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