Vue-router中懒加载的实现

非懒加载

import List from '@/components/list.vue'
const router = new VueRouter({
  routes: [
    { path: '/list', component: List }
  ]
})

（1）方案一（常用）：使用箭头函数+import动态加载

const List = () => import('@/components/list.vue')
const router = new VueRouter({
  routes: [
    { path: '/list', component: List }
  ]
})

或

 

routes: [

    {

    path: '/',

    name: 'HelloWorld',

    component: () => import('@/components/HelloWorld.vue')

    }

]

ps:  Vue中import from @ 中“@”含义

import List from '@/components/list.vue

@符号表示一个特定路径的别称，这个设置可以在build/webpack.base.conf.js中配置

resolve: {
  alias: {
    '@': resolve('src'),
    'vue$': 'vue/dist/vue.esm.js'
  }
}