如何使用Vue的路由实现组件的懒加载和按需加载？

在 Vue 中，可以通过路由实现组件的懒加载和按需加载。以下是两种常用的方式：

1. 使用 ES6 的import()方法实现路由懒加载：

   const Login = () => import('../component/login/login');
   

   在上述示例中，通过import()方法实现了组件懒加载。只有在访问/login路由时，才会加载对应的组件。

2. 使用webpack的require.ensure()方法实现路由懒加载：

   component: resolve => require.ensure([], () => resolve(require('@/views/Home')), 'Home');
   

   在上述示例中，通过require.ensure()方法实现了组件懒加载。当访问根路由/时，会加载Home组件。并且，多个路由指定相同的name，会合并打包成一个js文件。

你可以根据项目的具体需求选择适合的懒加载和按需加载方式。同时，还可以结合 Vue 的路由懒加载等功能来进一步优化应用的性能。