如何在路由器中正确延迟加载vuejs组件

我在路由器中加载组件时遇到问题

这是我的router/index.js文件

import Vue from "vue";
import Router from "vue-router";
import routes from './routes'

Vue.use(Router);

export default new Router({
    routes,
    mode: 'history',
    base: __dirname,
    scrollBehavior (to, from, savedPosition) {
        if (savedPosition) {
            return savedPosition
        }
        return { x: 0, y: 0 }
    }
});

这是我用来存储路由的routes.js文件

import {Trans} from '@/plugins/Translation'

function load(component) {
    return () => import(/* webpackChunkName: "[request]" */ `@/components/${component}.vue`)
}

// I have also tried this way
//Vue.component(
//  'async-webpack-example',
//  // The `import` function returns a Promise.
//  () => import('./my-async-component')
//)

export default [
    {
        path: '/:lang',
        component: {
            template: '<router-view></router-view>'
        },
        beforeEnter: Trans.routeMiddleware,
        children: [
            {
                path: "/",
                name: "Home",
                component: load('Home')
            },
            {
                path: "/contact",
                name: "Contact",
                component: load('Contact')
            },
            ...
            // Many more other routes
            ...
            {
                path: '*',
                redirect: load('404')
            }
        ]
    }
]

问题是我一直在犯错误

ERROR in ./src/router/routes.js
Module build failed: SyntaxError: Unexpected token (4:17)

  2 | 
  3 | function load(component) {
> 4 |     return () => import(/* webpackChunkName: "[request]" */ `@/components/${component}.vue`)
    |                  ^
  5 | }
  6 | 
  7 | 

我也尝试过以这种方式加载,但我一直收到相同的错误

const Test = () => import('@/components/Test');

然后路线看起来像

{
   path: "/",
   name: "Home",
   component: Test
}

但问题看起来是一样的。

谁能帮我弄清楚,我错过了什么。如果您需要任何其他信息,请让我知道,我会提供。非常感谢。