什么是路由懒加载?

简介: 路由懒加载

路由懒加载

整个网页默认是刚打开就去加载所有页面,路由懒加载就是只加载你当前点击的那个模块。


按需去加载路由对应的资源,提高首屏加载速度(tip:首页不用设置懒加载,而且一个页面加载过后再次访问不会重复加载)。


实现原理:将路由相关的组件,不再直接导入了,而是改写成异步组件的写法,只有当函数被调用的时候,才去加载对应的组件内容。

传统路由配置:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/views/login/index.vue'
import Home from '@/views/home/home.vue'
Vue.use(VueRouter)
const router = new VueRouter({
 routes: [
    { path: '/login', component: Login },
    { path: '/home', component: Home }
  ]
export default router

路由懒加载写法:

import Vue from 'vue'
import VueRouter from 'vue-router'
//const  Login = ()=> {
//    return  import('@/views/login/index.vue')
//}
//const  Home = ()=> {
//    return  import('@/views/home/home.vue')
//}
//有return且函数体只有一行,所以省略后为
const  Login = ()=> import('@/views/login/index.vue') 
const  Home = ()=>  import('@/views/home/home.vue')
Vue.use(VueRouter)
const router = new VueRouter({
 routes: [
    { path: '/login', component: Login },
    { path: '/home', component: Home }
  ]
export default router
目录
打赏
0
0
0
0
15
分享
相关文章
网络协议与层次划分:探索计算机网络体系结构
网络协议与层次划分:探索计算机网络体系结构
263 0
面试官:【webpack和vite的区别?vite一定比webpack快吗?vite的缺点是什么?webpack的热更新和vite的热更新区别?】
面试官:【webpack和vite的区别?vite一定比webpack快吗?vite的缺点是什么?webpack的热更新和vite的热更新区别?】
2956 1
前端开发中的性能瓶颈分析与优化
【7月更文挑战第27天】前端开发中的性能优化是一个系统工程,需要从多个角度入手,综合运用多种策略。通过减少网络延迟、优化资源加载、优化DOM操作、优化JavaScript执行以及第三方服务优化等措施,可以显著提升前端应用的性能。同时,通过性能监控和调优工具的使用,可以持续监控和优化应用性能,确保用户获得流畅、高效的体验。
【GitHub】如何在github上提交PR(Pull Request) + 多个pr同时提交、互不干扰
【GitHub】如何在github上提交PR(Pull Request) + 多个pr同时提交、互不干扰
2896 6
为什么POST请求会发送两次请求?
为什么POST请求会发送两次请求?
210 0
简述下 React 的生命周期?每个生命周期都做了什么?
react的生命周期,是react组件从挂载到更新再到卸载的这样一个过程,函数组件是没有生命周期这样的一个概念的,它本身就只是一个函数,只有类组件才存在生命周期这样一个概念
559 0
uniapp 实现退出登录 清除Token
uniapp 实现退出登录 清除Token
304 0
【Web 前端】什么是事件冒泡?什么是事件委托?
【4月更文挑战第22天】【Web 前端】什么是事件冒泡?什么是事件委托?
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问