CODEWITHSUNDEEP
vue.jsvue-componentvue-router
Mikko
Mikko

Reputation: 637

Vue router components evaluated on import

I have an application like

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

Vue.use(VueRouter);

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

routes.es6 contains my router module:

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

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

export default new VueRouter({
  routes,
});

This works but has one major drawback. Let's assume my index component is defined as follows

<template>
    ...
</template>

<script>
  require(...)

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

Now all require and import statements are evaluated once the components are imported in the routes.es6 file and they are injected in the main app even though they should be scoped to the specific route.

How to overcome this?

Upvotes: 0

Views: 630

Answers (1)

Marek Urbanowicz
Marek Urbanowicz

Reputation: 13684

It is called - LAZY LOADING

It is explained well in Vue-Router docs. https://router.vuejs.org/en/advanced/lazy-loading.html

Upvotes: 1

Related Questions