vue之router路由最优美写法

vue之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()方法。（按需加载）

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

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

文章转自：https://blog.csdn.net/qq_42690547/article/details/88316897?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.nonecase