异步组件 Vue 2

Question

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

Vue 2 使用单文件组件方法
Webpack 2
Vue 路由器

该应用程序非常基础，我在 App 中包含一个 "everyone" 部分，在 Admin 中包含一个 "admin" 部分。当且仅当我访问相应的路线时，我想加载组件和与 Admin 相关的所有 .js。

阅读 vue-router docs on Lazy Loading, and the one of 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 函数的第三个参数。

异步组件 Vue 2

Async components Vue 2

javascript

webpack-2

vue-router

async-components

vuejs2

app.js

Admin.vue