vue路由懒加载

// Vue路由懒加载示例代码

// 引入Vue Router
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

// 定义路由
const routes = [
  {
    path: '/',
    name: 'Home',
    // 懒加载组件，使用 import() 语法来实现按需加载
    component: () => import(/* webpackChunkName: "home" */ './views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    // 懒加载组件，并且可以指定加载时的占位符组件
    component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
    beforeEnter: (to, from, next) => {
      console.log('Loading About Page...');
      next();
    }
  }
];

// 创建路由实例
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

// 导出路由实例
export default router;

解释说明：

1. 懒加载（Lazy Loading）：通过 import() 语法动态导入组件，而不是一次性加载所有组件。这有助于减少初始加载时间，提升应用性能。
2. webpackChunkName 注释：用于给打包后的文件命名，方便调试和管理。
3. beforeEnter 钩子：在进入 /about 路由前执行一些逻辑，比如显示加载提示等。