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} />

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

import React, { Suspense } from 'react';

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <Router>
          {/* 路由配置 */}
        </Router>
      </Suspense>
    </div>
  );
}

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 },
]

1. 最后，在创建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');

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

代码007普通

打赏 收藏 海报 链接