vue中如何实现路由懒加载

在 Vue 中实现路由懒加载可以通过异步组件来实现。使用异步加载组件时，只有在需要时才会加载组件，这可以大大提高应用程序的性能。

下面是实现步骤：

1. 安装 `@babel/plugin-syntax-dynamic-import` 插件

npm install @babel/plugin-syntax-dynamic-import --save-dev

2. 在 `.babelrc` 文件中添加插件

{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

3. 在路由配置文件中使用 `import()` 动态加载组件

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('./views/Home.vue')
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('./views/About.vue')
    }
  ]
})

export default router

这样就能够实现路由懒加载了。在访问该路由时，只有对应的组件被加载，其他组件不会被加载，从而提高了应用的性能。