单页应用SPA、多页应用MPA

SPA单页应用

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

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

MPA多页应用

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

两者区别

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