路由懒加载

在打包构建应用时，如果页面很多，JavaScript 包会变得非常大而影响页面加载。如果能把不同路由对应的组件分割成不同的代码块，然后在路由被访问的时候才加载对应的组件，这样会更加高效，代码如下：

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/about',
        name: 'About',
        component: () => import(/* webpackChunkName: "about" */'./views/About.vue')
    }
]javascript

结合 Vue 的异步组件和模块打包工具 Webpack 或者 Vite 的代码分割功能，可以轻松实现路由组件的懒加载。我们将会在后面的实战项目中具体讲解这部分内容。

至此，整个 Vue Router 相关的知识都已介绍完毕。正如本章开始所说的，在日常的单页移动 Web 应用中，Vue Router 的使用非常广泛，它用于处理页面之间的切换以及管理整个应用的路由配置，已经成为使用 Vue 的项目标配。