这样引入组件的写法有什么优点？

Question

export default [
    {
        path: 'richTextEditor',
        name: 'richTextEditor',
        title: '富文本编辑器',
        component: resolve => { require(['../views/devTool/richTextEditorView.vue'], resolve) }
    }
]

看到别人demo里组件引入是这么写的，这个resolve写法跟直接写组件名有什么区别吗？

Answer 1

component:()=>import('../views/devTool/richTextEditorView.vue')

https://router.vuejs.org/en/a...

---

你可以在工厂函数中返回一个 Promise，所以当使用 webpack 2 + ES2015 的语法时可以这样：

Vue.component(
 'async-webpack-example',
 // 该 `import` 函数返回一个 `Promise` 对象。
 () => import('./my-async-component')
)

当使用局部注册时，也可以直接提供一个返回 Promise 的函数：

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

https://cn.vuejs.org/v2/guide...

不管是router的文档还是vue本身的文档都有详细的说明

文档文档文档啊

Answer 2

这是异步组件，在没有用到这个组件时不会加载它，可以减少数据加载量

https://cn.vuejs.org/v2/guide...