Vue 路由懒加载

路由需要写在router文件夹下的index.js中

按照npm 安装之后给出是示例写法 是这样的

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'
Vue.use(Router)

export default new Router({
  routes:[
      path:'/',
      name:'HelloWorld',
      component:resolve=>require(['@/component/HelloWorld'],resolve)
  ]
})

懒加载 --->延迟加载 ,在需要的时候进行加载,随用随载
像vue种种单页面应用,如果么有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会长时间出现白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效地分担首页所承担的加载压力,减少首页加载用时

简单的说 进入首页不用一次加载过多的资源造成用时过长

如果打包过程 出现报错 找到build下面的webpack.pro.conf.js 添加publicPath:'./'
补充一点 方法中路由跳转
this.$router.push({name:'home'});
this.$router.go('/login')