router最优写法（带代码详解）

官方基础写法

理解版

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 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')
     }
  ]
})

如果对你有用记得一键三连