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

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

相关推荐
打不着的大喇叭几秒前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
Sun_light24 分钟前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子27 分钟前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
百锦再28 分钟前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
快起来别睡了31 分钟前
Vue 3 中的组件通信与组件思想详解
vue.js
优雅永不过时_v36 分钟前
基于vite适用于 vue和 react 的Three.js低代码与Ai结合编辑器
前端·javascript
WildBlue40 分钟前
🧊 HTML5 王者对象 Blob - 二进制世界的魔法沙漏
前端·javascript·html
不讲道理的柯里昂44 分钟前
Vue MathJax Beautiful,基于Mathjax的数学公式编辑插件
vue.js·开源
啷咯哩咯啷44 分钟前
Vue3构建低代码表单设计器
前端·javascript·vue.js
用户26124583401611 小时前
vue学习路线(10.监视属性-watch)
前端·vue.js