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路由器组件在导入时评估

1 个答案: