vue 路由懒加载

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

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

Vue.use(VueRouter);

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

const router = new VueRouter({
  mode: 'history',
  routes
});

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

解释说明：

1. 引入 Vue 和 VueRouter：首先引入 Vue 和 VueRouter，并使用 Vue.use(VueRouter) 来安装路由插件。
2. 定义路由配置：在 routes 数组中定义路由规则。每个路由对象包含 path 和 component 属性。
3. 懒加载组件：使用 () => import('./views/Home.vue') 的方式来实现懒加载。这种方式会在路由被访问时才加载对应的组件，而不是一开始就加载所有组件。/* webpackChunkName: "home" */ 是一个注释，用于给打包后的文件命名，方便调试和管理。
4. 创建路由器实例：通过 new VueRouter 创建路由器实例，并传入路由配置。
5. 挂载 Vue 实例：最后，创建 Vue 实例并挂载到页面的 #app 元素上。

这样做的好处是可以减少初始加载时间，提高应用性能，特别是在大型项目中非常有用。