[Vue] Lazy Load a Route by using the Dynamic Import in Vue.js

标签：vuerouter   back   mic   you   rman   code   form   his   als   

By default, vue-router doesn’t lazy load the routes unless you tell it to do it. Lazy loading of the non-critical routes is one of the points of the PRPL pattern.

This lesson will show you how you can use the dynamic import to lazy load non-critical routes.

When we using Vue dynamice import syntax:

const router = new VueRouter({
  routes: [
    { path: ‘/images‘, component: () => import(‘./components/Images‘) },
    { path: ‘/images/:id‘, component: () => import(‘./components/Details‘), props: true },
    { path: ‘/‘, redirect: ‘/images‘ }
  ]
})

To enable that, we need to install:

npm install babel-plugin-syntax-dynamic-import

.babelrc:

{
  "plugins": ["syntax-dynamic-import"]
}

[Vue] Lazy Load a Route by using the Dynamic Import in Vue.js

标签：vuerouter   back   mic   you   rman   code   form   his   als   

原文地址：https://www.cnblogs.com/Answer1215/p/9255751.html