前端基础vue路由懒加载

为什么用路由懒加载

首屏组件加载速度更快一些，解决白屏问题，常言道需要就加载，不需要就先放一边

懒加载定义 

懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。

 使用

常用的懒加载方式有两种：即使用vue异步组件 和 ES中的import（及require.ensure）

1、未用懒加载，vue中路由代码如下

 import Vue from 'vue'
 import Router from 'vue-router'
 import HelloWorld from '@/components/HelloWorld'

 Vue.use(Router)

 export default new Router({
    mode：'hash'
    routes: [
       {
         path: '/',
         name: 'HelloWorld',
         component:HelloWorld
       }
     ]
})

备注：mode是传参模式，用hash有#，#  就是  hash符号，中文名为哈希符或者锚点，在  hash  符号后的值称为  hash  值。另外有一个history是没有的

路由的  hash  模式是利用了  window 可以监听 onhashchange 事件来实现的，也就是说  hash  值是用来指导浏览器动作的，对服务器没有影响，HTTP 请求中也不会包括  hash  值，同时每一次改变  hash  值，都会在浏览器的访问历史中增加一个记录，使用“后退”按钮，就可以回到上一个位置。所以，hash 模式 是根据  hash 值来发生改变，根据不同的值，渲染指定DOM位置的不同数据。

2、vue异步组件实现懒加载

　　方法如下：component：resolve=>(require(['需要加载的路由的地址'])，resolve)

import Vue from 'vue'
import Router from 'vue-router'
　　/* 此处省去之前导入的HelloWorld模块 */
Vue.use(Router)

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

3、ES 提出的import方法，（最常用,官网建议）

方法如下：const HelloWorld = （）=>import('需要加载的模块地址')

　　　　（不加 { } ，表示直接return）

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const HelloWorld = ()=>import("@/components/HelloWorld")
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component:HelloWorld
    }
  ]
})

延申：组件懒加载（与路由懒加载相同）

1、原来组件中写法

<template>
  <div class="hello">
  <One-com></One-com>
  1111
  </div>
</template>

<script>
import One from './one'
export default {
  components:{
    "One-com":One
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

2、import方法

<template>
  <div class="hello">
  <One-com></One-com>
  1111
  </div>
</template>

<script>
const One = ()=>import("./one");
export default {
  components:{
    "One-com":One
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

3、异步方法

<template>
  <div class="hello">
  <One-com></One-com>
  1111
  </div>
</template>

<script>
export default {
  components:{
    "One-com":resolve=>require(['./one'],resolve)
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

总结

路由和组件的常用两种懒加载方式：

1、vue异步组件实现路由懒加载

　　component：resolve => require(['需要加载的路由的地址'], resolve)

       require('name')：是同步加载模块的形式；require(['name1', 'name2'])：是异步加载模块的形式；

2、es提出的import(推荐使用这种方式)

　　const HelloWorld = （）=>import('需要加载的模块地址')

       import函数支持动态加载模块，返回一个 Promise 对象。