vue学习指南：第十二篇(详细) - Vue的 路由 第二篇 ( 路由按需加载(懒加载))

标签：开心   使用   性能   为什么   收获   补充   nbsp   学习   highlight   

　　各位朋友 因 最近工作繁忙，小编停更了一段时间，快过年了，小编祝愿 大家 事业有成 学业有成 快乐健康 2020开心过好每一天。从今天开始 我会抽时间把 Vue 的知识点补充完整，以及后期会带给大家更完善的知识体系！！！

　　路由的按需加载(懒加载)

　　我们都知道 vue的路由是我们必学的，也是不可分离的一部分，我们传统引入路由的方式是这样的，　

import Home from ‘@/components/home/Home‘

但是在真正项目的开发中，这种现象是杜绝的，是不建议使用这种传统方式引入的。

为什么不建议使用呢？

　　比如你当前有三个路由需要引入，会把这三个组件的js代码放在一个js文件中，导致打开其中一个页面，会把其它js代码也加载下来，这样是非常不好的，当项目很大会影响性能。

我们要使用路由懒加载

　　比如打开 home 组件只加载home组件的js，不加载其它组件，css没有问题因为 style标签有个 scoped，只针对私有的。

常用的路由懒加载有两种

　　1. 使用 Vue异步组件 和 Es中的 import

　　2. Vue 异步组件实现懒加载

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

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

　　3. ES 提出的 import

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

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

import Vue from ‘vue‘
import Router from ‘vue-router‘

Vue.use(Router)

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

作者：晋飞翔

手机号(微信同步)：17812718961

希望本篇文章 能给正在学习 前端的朋友 或 以及工作的朋友 带来收获 不喜勿喷 如有建议 多多提议 谢谢！

import Home from ‘@/components/home/Home‘

vue学习指南：第十二篇(详细) - Vue的 路由 第二篇 ( 路由按需加载(懒加载))

标签：开心   使用   性能   为什么   收获   补充   nbsp   学习   highlight   

原文地址：https://www.cnblogs.com/jinfeixiang/p/12174772.html