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>

现在，一旦将组件导入到routes.es6文件中，并且将它们注入主应用程序，即使它们应范围范围范围为特定路由，所有require和import语句都将被评估。

。

如何克服这个？

Answer 1

它称为 - 懒惰加载

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