Tips——单页面内的多重跳转路由使用

最新推荐文章于 2022-11-02 23:19:59 发布

weixin_34204722

最新推荐文章于 2022-11-02 23:19:59 发布

阅读量153

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/bbcfive/p/10625258.html

本文介绍单页面应用的概念及其如何通过隔离固定公共部分并仅更新变化内容来提高效率。文中对比了react-router和if...else两种实现方式，并展示了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、问题背景

一个路由往往代表一个地址，即一个页面。但同级网页页面的内容有很多是重复的，如果每次加载页面都要加载这些“共有”内容，会导致效率的降低。因此，单页面应用应运而生。它主张在同一页面下将“共同”部分隔离固定下，对需要变换的局部作跳转导航，这样避免了重复渲染，大大提高了效率。此种方法被大量应用在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 />;
}

目前两种方案并没有太大的效果差别。效率差别还需进一步测试。

转载于:https://www.cnblogs.com/bbcfive/p/10625258.html