应用场景
 
在前端开发的过程中,时常有这样的一个需求,需要将某个组件,展示在不同的页面中。常见的有,头部菜单栏、底部版权,如下图中的菜单,就需要在不同页面中进行显示。
 
 
解决方法
 
假设有这样一个需求,希望把下面的这个头部菜单在 Home 和 About 这两个页面中显示
 
 
在页面中,引入公共组件
 
在需要显示头部组件的页面中,引入头部组件,如下所示。
 
 
这样确实能解决问题,但比较麻烦,需要在每个使用的页面中,都引入一次。
 
另外一个问题是,在 Header 组件内部的状态,切换路由后,状态会被重置,如下所示。
 
 
代码如下