Vue 路由器组件在导入时评估答案

【问题标题】：Vue router components evaluated on importVue 路由器组件在导入时评估
【发布时间】：2017-04-24 18:57:08
【问题描述】：

我有一个类似的应用程序

import Vue from 'vue';
import VueRouter from 'vue-router';
import router from './routes.es6';

Vue.use(VueRouter);

new Vue({
  router,
}).$mount('#app');

routes.es6 包含我的路由器模块：

import VueRouter from 'vue-router';
import Index from './pages/index.vue';

const routes = [
  {
    path: '/',
    name: 'index',
    component: Index,
  },
  ...
];

export default new VueRouter({
  routes,
});

这可行，但有一个主要缺点。假设我的索引组件定义如下

<template>
    ...
</template>

<script>
  require(...)

  export default {
    ...
  };
</script>

现在所有require 和import 语句都会在组件被导入routes.es6 文件后进行评估，并将它们注入到主应用程序中，即使它们的作用域应该是特定的路由。

如何克服这个问题？

【问题讨论】：

标签： vue.js vue-component vue-router

【解决方案1】：

它被称为 - LAZY LOADING

在 Vue-Router 文档中有很好的解释。 https://router.vuejs.org/en/advanced/lazy-loading.html

【讨论】：