Dynamic introduction of components in vue routing (various ways of writing import and require)

Dynamic introduction of components in vue routing (various ways of writing import and require)

Commonly used import writing method (as shown in the figure below):

Commonly used to write and send, first use import to import component objects through the path, and then assign them to the component.

slightly more advanced

Directly "@" to the target main folder, no need to type so many dots.

The combination of the first and the second can achieve lazy loading.

Source conversion:

const login = () => import('@/views/login/index')
...
{
...
    component: login,
  ...
  },

When there are many routes in the project, it may be necessary to dynamically set the route according to the array. In the setting, the method of dynamically setting the import address of the component component object:

let url = 'xxxxxxx'
{
...
component: () =>