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

前端基础vue路由懒加载

news 2025/8/8 15:56:29

为什么用路由懒加载

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

懒加载定义

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

使用

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