单页应用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随着路由的切换动态变化呢?
- 在定义路由时增加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';
标签:return,title,单页,MPA,html,跳转,SPA,路由,页面 来源: https://blog.csdn.net/lulu_678/article/details/96277551