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');

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

相关推荐
10年前端老司机1 分钟前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js
夏晚星2 分钟前
vue实现微信聊天emoji表情
前端·javascript
極光未晚4 分钟前
TypeScript在前端项目中的那些事儿:不止于类型的守护者
前端·javascript·typescript
ze_juejin5 分钟前
Vue3 + Vite + Ant Design Vue + Axios + Pinia 脚手架搭建
前端·vue.js
Rrvive6 分钟前
原型与原型链到底是什么?
javascript
安替-AnTi1 小时前
基于 React 和 TypeScript 搭建的机器学米其林餐厅数据分析项目
react.js·typescript·数据分析·毕设·米其林
極光未晚1 小时前
JavaScript BOM 对象:浏览器的隐形控制塔
前端·javascript·源码
天涯学馆1 小时前
网站秒变 App!手把手教你搞定 PWA
前端·javascript·面试
用户9272472502191 小时前
PHP + CSS + JS 数据采集与展示系统
javascript
小样还想跑1 小时前
axios无感刷新token
前端·javascript·vue.js