Question

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

这是我的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 }
    }
});

这是我的route.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
}

但问题看起来相同。

有人可以帮我弄清楚我所缺少的吗？如果您需要任何其他信息，请告诉我，我会提供。谢谢

Answer 1

我正在使用这种语法进行延迟加载。检查此语法可以解决您的问题。

Sub MoveFiles()
Dim sourceFolderPath As String, destinationFolderPath As String
Dim FSO As Object, sourceFolder As Object, file As Object
Dim fileName As String, sourceFilePath As String, destinationFilePath As String
Application.ScreenUpdating = False
sourceFolderPath = "D:\SourceFolder"
destinationFolderPath = "D:\DestinationFolder"
Set FSO = CreateObject("Scripting.FileSystemObject")
Set sourceFolder = FSO.Getfolder(sourceFolderPath)
For Each file In sourceFolder.Files
fileName = file.Name
If InStr(fileName, ".xlsx") Then ' Only xlsx files will be moved
    sourceFilePath = file.Path
    destinationFilePath = destinationFolderPath & "\" & fileName
    FSO.MoveFile Source:=sourceFilePath, Destination:=destinationFilePath
End If ' If InStr(sourceFileName, ".xlsx") Then' Only xlsx files will be moved
Next
'Don't need set file to nothing because it is initialized in for each loop 
'and after this loop is automatically set to Nothing
Set sourceFolder = Nothing
Set FSO = Nothing
End Sub

Answer 2

最后，我找到了使用上层语法的解决方案，这导致了我的问题。因此，如果您想以这种方式导入组件

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

然后您需要使用babel

首先您需要安装

npm install --save-dev babel-plugin-syntax-dynamic-import

然后在您的根文件夹中创建一个文件.babelrc，该文件的内容应为

{
  "plugins": ["syntax-dynamic-import"]
}

然后以任何方式启动npm 例如npm run dev

这将使您能够以较高的语法延迟加载组件

如何在路由器中适当延迟加载vuejs组件

2 个答案: