vue.js如何使用异步组件。

我按照官方示例撸了一下,代码如下:

  components: {
    'my-component': () => import('./my-async-component')
  }

发现会报出这个错:

'import' and 'export' may only appear at the top level 

是还需要设置一些其他的东西吗?望大神指点~~

阅读 4.5k
3 个回答
<script>
    const MyAsyncComponent = () => import('./my-async-component')
    export default {
        components: {
            MyAsyncComponent
        }
    }
</script>

你这么实现没有任何意义,
1、import 导入的包不会立即执行,只有在使用的时候才会调用
2、构建程序需要打import引进的包,这么写会报错
3、import('./my-async-component')导入的包会全部装载到内存中,占用过多内存,假设里面有一些多余的东西。推荐使用import {something} form './my-async-component'


一般会在大型的应用为了节省空间,或者做首屏优化时才会使用异步组件,而且官方明确说明 Browserify 是无法使用的,推荐使用webpack

import不行试试require呢!
我记得在做router配置的时候,写过require
大致是这样的:

    {
        path: '/',
        meta: {
            title: 'SmkCRM登录页面'
        },
        component: (resolve) => require(['./views/login.vue'], resolve)
    }

不知道是不是你要的!

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题