异步组件Vue 2

Question

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

1. 使用单文件组件方法的Vue 2
2. Webpack 2
3. Vue路由器

这个应用程序是非常基本的，我有一个“每个人”部分包含在App和一个“管理”部分包含在Admin。我想加载组件和所有与.js相关的Admin当且仅当我正在访问相应的路由。

在阅读了vue-路由器文件在延迟加载时和Vue2 论异步组件之后，我仍然不知道如何做到这一点，特别是使用单文件组件方法。

这是我目前所做的，但我不知道这是否可行，因为在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函数。