vue 同一个页面第二次跳转路由内容不更新
问题出现原因
在vue中相同路由之间跳转,默认在跳转路由时会采用缓存策略,并不会刷新当前路由组件。导致mounted(初始化),beforeDestory(销毁)等生命周期钩子函数并不会触发,从而产生路由跳转了,但是视图数据没有变化,数据不主动更新
解决方案
- 使用 watch 监听路由变化,当路由发生改变时,手动更新数据(设置方法,重新获取对应的数据)
- 使用App.vue 中为 router-view入口添加参数 :key=“$route.fullPath” (vue2,vue3都支持该属性)
- mounted里面执行的办法在 activated 里面在执行一遍,activated是路由的两个生命周期之一,解释如下图:
- activated 路由组件被激活时触发
- deactivated 路由组件失活时触发