当前位置： 移动技术网 > IT编程>开发语言>JavaScript > vue学习指南：第十二篇(详细) - Vue的 路由 第二篇 ( 路由按需加载(懒加载))

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

2020年01月10日  | 移动技术网IT编程  | 我要评论

　　各位朋友 因 最近工作繁忙，小编停更了一段时间，快过年了，小编祝愿 大家 事业有成 学业有成 快乐健康 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'

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网