VueJS stringify routes

Question

What is the best practice in terms of security to dynamically fully load router routes?

1. Retrieve all routes from backend and use router.addRoutes without hardcoding them at client?
2. Create the normal routes and filter through them? (Wouldn't this still have the entire router routes available at client for malicious accessing?)

I read here that 1. is the suggested way but I did not understand what needs to be done with regards to mapping the components. You cannot JSON.stringify the component property of the route because its a function. Let have a router snippet example to work with:

{
    path: '/employees',
    component: () => import('@/layout'),
    redirect: '/employees/master',
    name: 'Employees',
    alwaysShow: true,
    meta: {
      title: 'Employees',
      icon: 'user',
      roles: ['Admin'] // you can set roles in root nav
    },
    children: [
      {
        path: 'master',
        component: () => import('@/views/employees/master.vue'),
        name: 'Master',
        children: [
          {
            path: '',
            name: 'MasterIndex',
            component: () => import('@/views/employees/views/index.vue'),
            meta: { title: 'Master', noCache: true, icon: 'user' }
          },

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Answer 1

never mind, found solution here. To give more context:

Save the string part of the component into a map, retrieve the strings back and pass to the creation of the function at the client. Then attach function to route. It did not occur immediately to me to separate concern and not handle the component in its entirety.