vue-router两个不同的路由共用一个component的问题

Posted 2023-03-20

参考技术A 遇到这样一个场景，即两个不同的路由，使用同一个组件，但是切换路由时无法触发mounted方法

如图

在路由中引用的相同组件

这时会遇到mounted无法触发的问题

遇到这种问题有以下两种方法

在页面中watch $route来实现

但是这里有一个问题，就是页面第一次加载的时候，还是会触发mounted, 所以如果有在页面渲染时触发的逻辑，这里需要特殊处理一下

设置key为$route.fullPath之后，由于两个路由的fullPath不同，组件会被强制不复用，所以将会回到正常流程，切换路由时mounted会被触发

react多个路由共用同一个组件模块，切换路由跳转页面不刷新问题

参考技术A 问题背景
工作项目中两个页面模块基本业务流程和交互都差不多，因此决定用共用同一套组件，通过设置不同的路由，跳转到同一个模块，在模块内部通过路由的参数作区分，现在面临两个问题：
1）不同路由跳转后，组件只会重新渲染（render），而不会整个组件重新构建，即不会重走constructor等生命周期函数
2）共用reducer，需要解决数据相互解耦合，独立问题
路由问题原因和解决方案
react组件是根据diff算法来决定是否更新组件，不同路由跳转，如果组件props没有变化，则认为是同一个组件内部的状态更新，不会重建组件，需要每次跳转需要赋予组件不同的props，在路由组件最上层加上key：
const mapStateToProps = (state, props) => (
otherData: fun(state),
key: props.location.state.from, // 将路由参数中的from赋予key,或者props.location.state.pathname
);
export default connect(mapStateToProps)(MyComponent);
不同mapStateToProps绑定函数时的组件注入key的写法：
export default (props)=><User ...props key=props.location.state.from />
将路由参数from赋予给组件props的key，当不同路由跳转时，组件有了不同的key，因此实现了组件的构建更新

diff算法
diff算法是react的核心思想。当你添加了一个key之后，因为react在重新渲染时，会比较组件是否发生了变更，diff算法包括组件diff,element diff，还有dom树diff。有了key作为标识，react能很快的计算出是否需要重新渲染，如果没有添加key，默认就重新渲染。