当前位置：首页 > news >正文

网站建设及域名申请厦门企业网站优化公司

news 2026/4/7 9:31:26

网站建设及域名申请厦门,企业网站优化公司,北京360建筑网,免费中文网站模板下载为什么用路由懒加载首屏组件加载速度更快一些，解决白屏问题，常言道需要就加载，不需要就先放一边懒加载定义懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。使用常用的懒加载方式有两种：即…

为什么用路由懒加载

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

懒加载定义

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

使用

常用的懒加载方式有两种：即使用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>