异步组件Vue 2

Question

我尝试使用异步组件。这是我的配置：

1. Vue 2使用单一文件组件方法
2. Webpack 2
3. Vue Router

该应用程序非常基本，我有一个＆＃34;每个人＆＃34; App和＆＃34; admin＆＃34;中包含的部分Admin中包含的部分。我想加载该组件以及与.js相关的所有Admin当且仅当我访问相应的路线时。

在阅读vue-router docs on Lazy Loading和Vue2 on async components之后，我仍然不确定如何使用 单个文件组件 方法。

这是我目前所做的，但我不知道是否可以，因为在Vue2的文档中他们说：

Vue.component(
  'async-webpack-example',
  () => import('./my-async-component')
)

此外，我还需要对webpack做些什么，以便创建与Admin相关的所有内容，以便在到达管理路由时刚刚加载adminChunk.js？

使单个文件组件成为异步组件的语法是什么？

app.js

const Admin = resolve => {
    // require.ensure is Webpack's special syntax for a code-split point.
    require.ensure(['./components/admin/Admin.vue'], () => {
        resolve(require('./components/admin/Admin.vue'))
    })
};

const routes = [
    { path: '/', component: App },
    { path: '/admin', meta: { requiresAdmin: true }, component: Admin},
];

Admin.vue

<template>
        <admin-menu></admin-menu>
        <child></child>
</template>


<script>
    import AdminMenu from './Admin-Menu.vue'
    import Child from './child.vue

    export default{
        data () {
        },
        components: {
            AdminMenu,
            Child,
        },
    }
</script>

Answer 1

您可以使用块名称将第三个参数传递给require.ensure函数。