单页应用SPA、多页应用MPA

SPA单页应用

第一次进入页面的时候会请求一个html文件,刷新清除一下。切换到其他组件,此时路径也相应变化,但是并没有新的html文件请求,页面内容也变化了。

原理是:JS会感知到url的变化,通过这一点,可以用js动态的将当前页面的内容清除掉,然后将下一个页面的内容挂载到当前页面上,这个时候的路由不是后端来做了,而是前端来做,判断页面到底是显示哪个组件,清除不需要的,显示需要的组件。这种过程就是单页应用,每次跳转的时候不需要再请求html文件了

MPA多页应用

每一次页面跳转的时候,后台服务器都会给返回一个新的html文档,这种类型的网站也就是多页网站,也叫做多页应用

两者区别

SPA MPA
一个外壳页面和多个页面片段构成 由多个完整的html页面构成
页面片段之间跳转,部分加载 页面之间的跳转是从一个完整页面跳转到另一个完整页面
跳转后公共资源不重新加载 跳转后公共资源重新加载
用户体验好,片段切换快、移动端也一样 整个页面切换加载慢,网络不好则更慢。移动设备上体验不好
SEO麻烦,需要单独做 便于SEO
开发难度:需要专门框来降低此模式 开发难度低
http://xxx/shell.html#page1http://xxx/shell.html#page2 http://xxx/page1.htmlhttp://xxx/page2.html

MPA改变标题

在React搭建的SPA项目中页面的title是直接写在入口index.html中,当路由在切换不同页面时,title是不会动态变化的。那么怎么让title随着路由的切换动态变化呢?

  1. 在定义路由时增加title属性
    {
        path: "/regularinvestment",
        component: Loadable({
            loader: () => import('./../../business/Regularinvestment/index'),
            loading: PageLoading
        }),
        title: "这是自定义的标题"
    }

2.在路由的index.js获取到自定义的title设置页面标题即可。

   const RouteWithSubRoutes = route => {
        return (
            <Route
                exact
                path={route.path}
                render={props => {
                    document.title = route.title || "默认title";
                    return <route.component {...props} routes={route.routes}></route.component>
                }}
            />
        );
    };
    
    export default () => {
        return allRouters.map((route, i) => {
            return <RouteWithSubRoutes key={i} {...route}/>
        })
    };
另一种方式,用插件获取
import DocumentTitle from 'react-document-title';

单页应用SPA、多页应用MPA

上一篇:浅析:单页应用(SPA)和多页应用(MPA)的区别


下一篇:kubernetes CRI 前世今生