Detailed explanation of the three usage examples of asynchronous loading by vue+webpack

1. The first example

const Home = resolve => {
  import("@/components/home/").then( module => {
      resolve(module)
  }
}

Note: (The suffix can be written without writing the above import)

export default [{
  path: '/home',
  name:'home',
  component: Home,
  meta: {
    requireAuth: true, // Add this property to determine whether the page needs to be displayed if it needs to be logged in  },
}]

2. The second example

const router = new Router({
  routes: [
    {
       path: '/home',
       component: (resolve)=&gt; {
         require(['../components/home/home'], resolve) // Save importing on it       }
     }
  ]
})

3. The third example is also a recommended one

// r is resolve// The routing is also normal. This is written as the official recommendation. Lazy loading is divided by module.const Home = r =&gt; ([], () =&gt; r(require('../components/home/home')), 'home');
const router = new Router({
  routes: [
    {
     path: '/home/home',
     component: Home,
     name: 'home' ,
    }
  ]
})

Let me introduce the code to implement asynchronous component loading of vue+webpack. The specific code is as follows:

HTML

&lt;input type="button" @click="showchild" value="show"&gt; //After clicking the button, show is true, first get the child component, then render the div content&lt;div  v-if="show"&gt;
  &lt;child&gt;&lt;/child&gt;
&lt;/div&gt;

data () {
  return {
    msg: 'Welcome to Your  App',
    show:false
  }
},
methods: {
  showchild:function(){
    =true;
  }
},
components: {
  'child': function(resolve) {
    require(['./components/'], resolve);
  }
}

Note: When loading an asynchronous component, do not ignore the .vue following the component name. This example should be more intuitive. After clicking the button, the Boolean value of the variable show is changed to true. Since it is an asynchronous component, ajax will first get the component and then render it.

Summarize

The above are the three uses of vue+webpack that I introduced to you, I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!