项目情况:qiankun 搭建的 vue 应用

问题:

1. 使用了 keep-alive,vue 不同路由使用同一个组件,切换路由没触发 activated 钩子

2. 不同的 params,不触发 activated 钩子

解决方法:router-view 上添加 key

<router-view :key="$route.path"></router-view>

 

key 作用:

不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。

key改变时,Vue认为一个新的元素产生了,从而会新插入一个元素来替换掉原有的元素。从而可以触发组件的生命周期钩子或者触发过渡。

 

posted on 2021-09-12 10:59  W1N9s  阅读(952)  评论(0编辑  收藏  举报