Tips——单页面内的多重跳转路由使用
Posted bbcfive
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Tips——单页面内的多重跳转路由使用相关的知识,希望对你有一定的参考价值。
一、问题背景
一个路由往往代表一个地址,即一个页面。但同级网页页面的内容有很多是重复的,如果每次加载页面都要加载这些“共有”内容,会导致效率的降低。因此,单页面应用应运而生。它主张在同一页面下将“共同”部分隔离固定下,对需要变换的局部作跳转导航,这样避免了重复渲染,大大提高了效率。此种方法被大量应用在MVVM框架上。
二、方案
1.react-router
定义路由
<Router history={hashHistory}> <Route path="/" component={App}> <Route path="/repos" component={Repos}/> <Route path="/about" component={About}/> </Route> </Router>
使用路由
export default React.createClass({ render() { return <div> {this.props.children} </div> } })
2.if..else判断
if( choose == ‘/‘ ) { return <Root />; } else if( choose == ‘repos‘ ) { return <Repos />; } else if( choose == ‘about‘ ) { return <About />; }
目前两种方案并没有太大的效果差别。效率差别还需进一步测试。
以上是关于Tips——单页面内的多重跳转路由使用的主要内容,如果未能解决你的问题,请参考以下文章