vue2实现路由懒加载

以下内容仅供学习使用

1. 安装@babel/plugin-syntax-dynamic-import插件。
   1.1 使用npm安装：
   npm install --save-dev @babel/plugin-syntax-dynamic-import
   1.2 使用yarn安装：
   yarn add --dev @babel/plugin-syntax-dynamic-import
2. 安装完成后，在您的babel配置文件（通常是.babelrc或babel.config.js文件）中添加@babel/plugin-syntax-dynamic-import插件。
   

2.1 例如，如果您使用.babelrc文件，您可以这样配置：

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

2.2 如果您使用babel.config.js文件，您可以这样配置：

module.exports = {
  plugins: ['@babel/plugin-syntax-dynamic-import']
}

3. 在路由配置中使用component: () => import('component/path')替换原有的component: ComponentName。

const login = () => import('@/views/login/index.vue')//第二种方法
const home = () => import('@/views/home/index.vue')
const routes = [
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    name: 'login',
    //component:() => import('@/views/home/index.vue')  1、第一种方法
	component:login //第二种方法
  },
  {
    path: '/home',
    name: 'home',
    component: home
  },

]