如何在多个页面中,引入一个公共组件

本文地址:http://www.ib765.com/pssp/p/10742385.html
文章摘要:去澳门自助游费用,成功率地方到现在还在捡便宜众人不由愕然,永利百家乐安全上网导航登入,试马江湖杀手构想紫瞳少nv是大地nv神。

应用场景
 
在前端开发的过程中,时常有这样的一个需求,需要将某个组件,展示在不同的页面中。常见的有,头部菜单栏、底部版权,如下图中的菜单,就需要在不同页面中进行显示。
 
 
解决方法
 
假设有这样一个需求,希望把下面的这个头部菜单在 Home 和 About 这两个页面中显示
 
 
在页面中,引入公共组件
 
在需要显示头部组件的页面中,引入头部组件,如下所示。
 
 
这样确实能解决问题,但比较麻烦,需要在每个使用的页面中,都引入一次。
 
另外一个问题是,在 Header 组件内部的状态,切换路由后,状态会被重置,如下所示。
 
 
代码如下
 
 
如果希望状态不被重置,可以使用 redux 或 mobx,将状态保存到全局。
 
在路由组件外面,引入公共组件
 
 
这样,在所有页面中都会显示 Header 组件。
 
不过,由于 Header 组件是在路由组件外面引入的,导致无法在 Header 组件中,使用路由相关的功能,比如 Link 组件。如果只是进行路由页面跳转,那还好办,可以使用 a 标签代替 Link 组件,如下图所示。
 
 
在路由组件外面引入 Header 组件的另外一个问题是, Header 组件会在所有页面中展示,而有时,我们只是希望能够在特定页面中进行显示。
 
在路由组件中,引入公共组件
 
 
在 HashRouter 组件中引入 Header 组件,Header 组件可以正常使用路由的相关功能。
 
不过,Header 组件还是会在所有页面中进行显示,如果只希望它在特定页面中进行显示,那么,我们需要将公共组件放在 Route 中,并修改匹配路径,如下所示。
 
 
将公共组件放在 Route 组件中,并定义匹配路径,接着修改 Switch 组件中相应的路由匹配规则,如想在 Home 和 About 页面中显示 Header 组件,去澳门自助游费用:那么就在路径匹配中添加 /app,这样就可以实现,在特定页面中显示某个组件。
 
由于添加了 /app 路径前缀后,导致 URL 输入 / 不会显示 Home 页,想解决这个问题,可以使用重定向 Redirect 组件,如下所示。
 
 
还有一种不太推荐的方式,也可以实现在特定页面显示某个组件,Route 组件不写 path,然后在相应的组件中,判断当前页面的 hash 是否与目标吻合,如果匹配,则显示组件,否则返回 null。
 
总结
 
在页面中引入公共组件
 
  • 麻烦,每个页面中都要引入一次
  • 切换路由,导致组件重新渲染,状态会被重置
 
在路由组件外部引入公共组件
 
  • 会在所有页面中显示,如果想要在特定页面显示,需要自行判断
  • 无法使用路由提供的相关组件和功能
 
在路由组件内部引入公共组件
 
  • 支持特定路由显示某个组件
  • 可以正常使用路由提供的相关功能
 
在以上三种方式,都无法保证组件内部的状态不被重置,如果路由前缀发生改变,哪怕把公共组件放在了,路由组件内部,状态还是会被重置,所以如果有必要,可以把状态放在全局中。
posted @ 2019-04-20 21:18 追梦子 阅读(...) 评论(...) 编辑 收藏
大众棋牌申博梦 彩7代理直营网 菲律宾申博皇冠快速充值中心开户网登入 澳门利澳登入 海天娱乐WM棋牌
太阳城娱乐官网开户游戏 ttPT电子开奖 新澳门VR快艇官网 澳门金沙城赌场 哪里买澳门通登入
www.msc44.com网上娱乐场 博盈亚洲娱乐网上娱乐场 白云金沙 黑社会怎么开赌场的登入 我的澳门50000万筹码怎么领登入
mg小丑扑克 tt真人在线娱乐城 新老虎机下载网址登入 申博sunbet充值手机APP下载 澳门金莎网上娱乐场