React和Vue实现路由懒加载

React实现路由懒加载： React官方提供了React.lazy()函数来实现路由的懒加载。使用React.lazy()函数需要配合React的Suspense组件来使用。

1. 首先，使用React.lazy()函数动态导入组件，例如：

   const Home = React.lazy(() => import('./Home'));
   const About = React.lazy(() => import('./About'));

这样，在需要使用这些组件的地方，可以像使用普通组件一样使用它们。

1. 在路由配置中，使用React.lazy()返回的组件作为路由组件的值，例如：

   <Route path="/home" component={Home} /> <Route path="/about" component={About} />

2. 最后，在根组件中，使用Suspense组件来包裹需要懒加载的路由组件，例如：

   import React, { Suspense } from 'react';

   function App() {
   return (
   

   
   <Suspense fallback={

   Loading...

   }>
   <Router>
   {/* 路由配置 */}
   </Router>
   </Suspense>
   
   
   );
   }

   export default App;

在Suspense组件中，可以设置fallback属性来指定在组件加载完成前显示的loading状态。

Vue实现路由懒加载： Vue官方提供了Vue异步组件特性来实现路由的懒加载。使用Vue异步组件特性需要使用Vue的工厂函数（Vue.extend()）来动态创建组件。

1. 首先，创建一个异步函数来动态导入组件，例如：

   const Home = () => import('./Home');
   const About = () => import('./About');

这样，在需要使用这些组件的地方，可以像使用普通组件一样使用它们。

1. 在路由配置中，使用Vue异步组件作为路由组件的值，例如：

   const routes = [
   { path: '/home', component: Home },
   { path: '/about', component: About },
   ]

2. 最后，在创建Vue实例时，使用工厂函数（Vue.extend()）来创建路由组件，例如：

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

   Vue.use(VueRouter);

   const router = new VueRouter({
   routes
   });

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

这样，路由组件将会在访问对应路由时进行懒加载。