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

Question

我有一个像

这样的应用程序

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 文件后被评估，并且它们被注入到主应用程序中，即使它们应该被限定在具体路线。

如何克服这个问题？

Answer 1

它被称为 - LAZY LOADING

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

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

Vue router components evaluated on import

vue.js

vue-router

vue-component