vue之router路由最优美写法，懒加载、打包代码分离。

向右看齐 2022-03-11 09:39 378阅读 0赞

### 几种常用路由写法【官方推荐最优写法在最后】 ###

*   *  一、基础写法，没有懒加载，打包分离代码
     *  二、路由懒加载，import()方法。（按需加载）
     *  三、vue的异步组件，require()方法。（按需加载）
     *  四、vue的异步组件+webpack的ensure()方法。（按需加载+js打包分离）
     *  五、最优官方，懒加载和打包分离代码。（【官方推荐】按需加载+js打包分离）

## 一、基础写法，没有懒加载，打包分离代码 ##

> 官方最基础的路由写法

import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    
    Vue.use(Router)
    
    export default new Router({ 
      routes: [
        { 
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        }
      ]
    })

## 二、路由懒加载，import()方法。（按需加载） ##

> 官方的一种按需加载的方法，点击的时候才会请求，减少首页加载时间。

import Vue from 'vue'
    import Router from 'vue-router'
    const HelloWorld = () => import('@/components/HelloWorld')
    Vue.use(Router)
    
    export default new Router({ 
      routes: [
        { 
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        }
      ]
    })

## 三、vue的异步组件，require()方法。（按需加载） ##

> vue的一种按需加载的方法，点击的时候才会请求，减少首页加载时间。

import Vue from 'vue'
    import Router from 'vue-router'
    
    Vue.use(Router)
    
    export default new Router({ 
      routes: [
        { 
          path: '/',
          name: 'HelloWorld',
          component: resolve => require(['@/components/HelloWorld'], resolve),
        }
      ]
    })

## 四、vue的异步组件+webpack的ensure()方法。（按需加载+js打包分离） ##

> vue的一种按需加载的方法，webpack的ensure()方法实现js打包分离，每个组件单独打包，加载的时候文件不会太大。

import Vue from 'vue'
    import Router from 'vue-router'
    
    const HelloWorld = r => require.ensure([], () => r(require('@/components/HelloWorld')), 'HelloWorld')
    
    Vue.use(Router)
    
    export default new Router({ 
      routes: [
        { 
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        }
      ]
    })

## 五、最优官方，懒加载和打包分离代码。（【官方推荐】按需加载+js打包分离） ##

> vue官方的一种方法，import()方法和增加webpackChunkName。  
> 1.需要安装 cnpm i -s @babel/plugin-syntax-dynamic-import  
> 2.配置webpack，在webpack-base-conf.js的output加入chunkFilename: ‘\[name\].js’

import Vue from 'vue'
    import Router from 'vue-router'
    
    Vue.use(Router)
    
    export default new Router({ 
      routes: [
         { 
           path: '/',
           name: 'HelloWorld',
           component: () => import(/* webpackChunkName: "HelloWorld" */ '@/components/HelloWorld')
         }
      ]
    })

> 写的比较匆忙，有不对的请指出，没有用嵌套路由children，compontent写法也各不一样。