How to implement lazy loading of vue routing

This article mainly introduces the implementation method of lazy loading of vue routing. Now I will share it with you and give you a reference.

This article introduces the lazy loading of vue routes and shares it with everyone. The details are as follows:

We can divide the components corresponding to different routes into different code blocks, and then when the route is The corresponding component is loaded only when accessed.

1. component can be an arrow function, we can use dynamic import syntax to define code chunking points;

2. If you want to see it in the network To the name of the dynamically loaded component, you can add webpackChunkName;

3. At the same time, add chunkFileName

# under the filename in the output in webpack.base.conf.js

##Code

// router里面的index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
 routes: [
  {
   path: '/',
   name: 'home',
   /* 
    * 使用动态组件，component可以是一个箭头函数
    * @表示src目录
    * 如果想在network里面看到动态加载的组件名字，可以加webpackChunkName，同时要在webpack.base.conf.js里面的output里面的filename下面加上chunkFileName
    * network里面动态加载模块名称
    */
   
   component: () => import(/* webpackChunkName: 'home' */'@/pages/Homes')
  
   
  },
  {
   path: '/todos',
   name: 'Todos',
   component: () => import(/* webpackChunkName: 'todo' */'@/pages/Todos')
  }
 ]
})

Note that @ above represents the current src directory. For details, please refer to the webpack configuration

webpack.base.conf.js里面添加 chunkFilename: '[name].js'

output: {
 path: config.build.assetsRoot,
 filename: '[name].js',
 // 需要配置的地方
 chunkFilename: '[name].js',
 publicPath: process.env.NODE_ENV === 'production'
  ? config.build.assetsPublicPath
  : config.dev.assetsPublicPath
}

Analysis

#Created two components, home and todos, using routing lazy loading. After configuring, we executed npm run dev to run Project, open the network and refresh it. We will find that home.js is loaded. We will find that the name is the same as the webpackChunkName defined above. At the same time, clicking todos will load todo.js. This is a simple use of lazy loading of routes.

Others

In main.js, we can use the template syntax or the render function at the entry of the project

new Vue({
 el: '#app',
 router,
 components: { App },
 /*
 * 这里使用的template的语法
 * 也可以使用render函数,直接return一个html结构
 */
 // template: &#39;<App/>&#39;
 render() {

  return (
   <p>
    <App></App>
   </p>
  )
 } 
})

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Simple example of local preview effect of uploaded images implemented by jQuery

Some common problems in JavaScript interviews Wrong points sorted out

vue axios request interception example code

The above is the detailed content of How to implement lazy loading of vue routing. For more information, please follow other related articles on the PHP Chinese website!