【vue-router】Vue-router如何实现路由懒加载

✨✨ 欢迎大家来到景天科技苑✨✨

🎈🎈 养成好习惯，先赞后看哦~🎈🎈

🏆 作者简介：景天科技苑
🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。
🏆《博客》：Python全栈，Golang开发，云原生开发，前后端框架，PyQt5和Tkinter桌面开发，小程序开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi，flask等框架，云原生K8S集群搭建与管理，linux，shell脚本等实操经验，网站搭建，数据库等分享。

所属的专栏：前端零基础，实战进阶教学
景天的主页：景天科技苑

Vue-Router路由懒加载

在现代前端开发中，Vue.js凭借其轻量级和易用性，成为了很多开发者的首选框架。然而，在构建大型单页应用（SPA）时，初始加载时间可能会变得非常长，影响用户体验。为了解决这个问题，Vue.js引入了路由懒加载机制。本文将结合实际案例，详细讲解Vue-Router路由懒加载的用法。

一、Vue-Router简介

Vue Router是Vue.js官方的路由管理器，它允许你以一种简单的方式构建单页面应用中的页面路由。Vue Router提供了强大的路由管理功能，包括嵌套路由、动态路由、路由守卫等。

要使用Vue Router，首先需要安装它。你可以通过npm或yarn进行安装：

npm install vue-router
# 或者
yarn add vue-router

安装完成后，你需要在Vue项目中配置Vue Router。下面是一个简单的配置示例：

import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(Router);

const router = new Router({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
  ],
});

export default router;

在上述代码中，我们定义了两个路由：首页（/）和关于页（/about）。当用户访问这些路由时，对应的组件会被渲染到页面上。

二、什么是路由懒加载

在构建大型单页应用时，如果将所有路由和组件都打包在一起，会导致初始加载时间非常长。为了解决这个问题，Vue.js引入了路由懒加载机制。路由懒加载是指只有在需要访问某个路由时，才加载该路由对应的组件代码。这样可以显著减少初始加载时间，提高应用程序的性能。

Vue Router的懒加载依赖于Webpack的代码分割功能。Webpack会将每个懒加载的组件打包成一个独立的代码块（chunk），并在需要时动态加载。

三、路由懒加载的实现方式

Vue Router的懒加载可以通过多种方式实现，主要包括箭头函数+import、箭头函数+require以及require.ensure等。以下是这些方式的详细介绍和示例。

1. 箭头函数+import

这是Vue Router懒加载中最推荐的方式，因为它语法简洁、直观易懂，并且符合现代JavaScript标准。使用箭头函数和import()函数可以实现路由的懒加载。

const Home = () => import('./components/Home.vue');
const About = () => import('./components/About.vue');

const router = new Router({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
  ],
});

在上述代码中，Home和About组件都是通过箭头函数和import()函数实现的懒加载。当用户访问首页或关于页时，对应的组件才会被加载。

你还可以为生成的代码块指定名称，以便更好地管理和调试。

const Home = () => import(/* webpackChunkName: "home" */ './components/Home.vue');
const About = () => import(/* webpackChunkName: "about" */ './components/About.vue');

这样，Webpack会将Home和About组件分别打包成名为home.js和about.js的代码块。

2. 箭头函数+require

在一些旧版本的构建工具中，你可能会看到使用箭头函数和require()函数来实现路由懒加载的方式。虽然这种方式仍然有效，但相对于箭头函数+import来说，它的语法相对复杂，不够直观。

const router = new Router({
  routes: [
    {
      path: '/',
      component: resolve => require(['./components/Home.vue'], resolve),
    },
    {
      path: '/about',
      component: resolve => require(['./components/About.vue'], resolve),
    },
  ],
});

在上述代码中，Home和About组件都是通过箭头函数和require()函数实现的懒加载。当用户访问首页或关于页时，对应的组件才会被加载。

需要注意的是，require()函数是CommonJS规范中的模块导入方式，而在现代JavaScript开发中，ES6的import/export规范更为常用。因此，推荐使用箭头函数+import的方式来实现路由懒加载。

3. require.ensure

require.ensure是Webpack 1.x版本中用于代码分割和懒加载的API。然而，在Webpack 2.x及以上版本中，require.ensure已经被废弃，推荐使用动态import（即import()函数）来替代。因此，在现代Vue项目中，你几乎不会看到使用require.ensure来实现路由懒加载的情况。

不过，为了完整性，这里还是简单介绍一下require.ensure的用法。

const Home = r => require.ensure([], () => r(require('./components/Home.vue')), 'home');
const About = r => require.ensure([], () => r(require('./components/About.vue')), 'about');

const router = new Router({
  routes: [
    { path: '/', component: Home, name: 'Home' },
    { path: '/about', component: About, name: 'About' },
  ],
});

在上述代码中，Home和About组件都是通过require.ensure实现的懒加载。然而，由于require.ensure已经被废弃，这种方式在现代Vue项目中不再推荐使用。

四、动态路由和懒加载

在Vue Router中，动态路由允许你定义路径时使用占位符，这些占位符将会被实际的数值所替代。通过动态路由和懒加载的结合，你可以实现更加灵活和高效的路由管理。

1. 定义动态路由

动态路由的定义非常简单，只需要在路径中使用占位符即可。例如，定义一个动态路由/user/:id，其中:id就是动态的参数。

const UserProfile = () => import('./components/UserProfile.vue');

const router = new Router({
  routes: [
    { path: '/user/:id', component: UserProfile, name: 'UserProfile' },
  ],
});

在上述代码中，我们定义了一个动态路由/user/:id，并为其指定了UserProfile组件。当用户访问/user/123时，UserProfile组件会被加载，并且可以通过$route.params.id来获取传递过来的动态参数id。

2. 获取动态参数

在组件中，你可以通过$route.params来获取传递过来的动态参数。例如，在UserProfile组件中，你可以这样获取id参数：

export default {
  created() {
    console.log(this.$route.params.id); // 输出传递过来的id参数
  },
};

五、路由懒加载的最佳实践

在使用Vue Router的懒加载功能时，有一些最佳实践可以帮助你更好地优化应用程序的性能和用户体验。

1. 合理使用代码分割

代码分割是Webpack的一个重要功能，它可以将代码拆分成多个独立的代码块，并在需要时动态加载。在使用Vue Router的懒加载功能时，你应该合理使用代码分割，将不同的路由组件拆分成不同的代码块。

例如，你可以将首页、关于页、用户详情页等不同的路由组件拆分成不同的代码块，并在需要时动态加载它们。

const Home = () => import(/* webpackChunkName: "home" */ './components/Home.vue');
const About = () => import(/* webpackChunkName: "about" */ './components/About.vue');
const UserProfile = () => import(/* webpackChunkName: "userProfile" */ './components/UserProfile.vue');

const router = new Router({
  routes: [
    { path: '/', component: Home, name: 'Home' },
    { path: '/about', component: About, name: 'About' },
    { path: '/user/:id', component: UserProfile, name: 'UserProfile' },
  ],
});

2. 使用Webpack的prefetch和preload指令

Webpack提供了prefetch和preload指令，可以帮助你更好地优化代码的加载性能。prefetch指令会在浏览器空闲时预加载指定的代码块，而preload指令则会在当前代码块加载时立即预加载指定的代码块。

你可以在使用Vue Router的懒加载功能时，结合Webpack的prefetch和preload指令来进一步优化代码的加载性能。

const Home = () => import(/* webpackPrefetch: true */ './components/Home.vue');
const About = () => import(/* webpackPreload: true */ './components/About.vue');

const router = new Router({
  routes: [
    { path: '/', component: Home, name: 'Home' },
    { path: '/about', component: About, name: 'About' },
  ],
});

在上述代码中，我们使用了Webpack的prefetch和preload指令来优化Home和About组件的加载性能。需要注意的是，preload指令通常用于关键路径上的代码块，而prefetch指令则用于非关键路径上的代码块。