1

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

  1. Vue 2 使用单文件组件方法
  2. 网页包 2
  3. Vue路由器

该应用程序非常基本，我有一个“每个人”部分App包含在Admin. 我想加载组件以及.js与Adminif 且仅当我访问相应路线时相关的所有内容。

在阅读了关于延迟加载的 vue-router 文档和关于异步组件的 Vue2文档之后，我仍然不确定如何做到这一点，尤其是使用单文件组件方法。

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

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

另外，我与 webpack 有什么关系，所以它会创建一大块与之相关的所有内容，Admin以便adminChunk.js在到达 admin route 时才加载？

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

应用程序.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},
];

管理员.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>
4

1 回答 1

2

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

于 2017-05-03T04:35:31.590 回答