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

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

　　各位朋友 因 最近工作繁忙，小编停更了一段时间，快过年了，小编祝愿 大家 事业有成 学业有成 快乐健康 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的 路由 第二篇 ( 路由按需加载(懒加载)) 的全部内容， 来源链接： utcz.com/z/379428.html

回到顶部