Vue-router中的懒加载

最新推荐文章于 2024-11-29 09:12:36 发布

shixiaoxiao106

最新推荐文章于 2024-11-29 09:12:36 发布

阅读量216

点赞数 1

分类专栏： vue基础

本文链接：https://blog.csdn.net/shixiaoxiao106/article/details/81480447

版权

vue基础专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何使用Vue的路由懒加载技术来优化大型单页应用的加载速度。通过将app.js分割成多个按需加载的小文件，显著提升了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一，代码分割器 coding split

解决问题：vue在单页面开发时，只是加载一个app.js 文件，如果项目很大，页面加载速度会很慢，为了解决页面加载速度慢的问题，我们将app.js 文件分割成多个请求文件进行加载，用户点击那个页面，加载那个页面的数据

二，代码分割器的用法

平时路由配置如下

import Vue from 'vue'
import Router from 'vue-router'
import details from '../components/details'
import home from '../components/home'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/home',
      name: 'home',
      component: home
    },
    {
      path: '/details',
      name: 'details',
      component: details
    }
  ]
})

加上代码分割器的配置如下

动态加载文件，路由中的组件不再是一个组件而是一个函数，路由切换时动态去加载这个组件

import Vue from 'vue'
import Router from 'vue-router'
// import details from '../components/details'
// import home from '../components/home'
Vue.use(Router);
export default new Router({
  routes: [
    {
      path: '/home',
      name: 'home',
      component: ()=>import('../components/home')
    },
    {
      path: '/details',
      name: 'details',
      component: ()=>import('../components/details')

    }
  ]
})