react router缓存vue路由在keep-alive下的刷新问题
问题描述：
  在keep-alive中的在跳转到指定的路由时刷新对应的路由，其余不刷新。
<transition name="fade" mode="out-in">
<keep-alive>
<router-view></router-view>
</keep-alive>
</transition>
有⼏种解决⽅式：
  1.在keep-alive中直接添加 include，cachedViews（Array类型：包含vue⽂件的组件name都将被缓存起来）；反之exclude则是不包含；
  注意：所有.vue组件⽂件都必须附上name属性建议⽤vuex管理cachedViews
<keep-alive :include="cachedViews">
<router-view></router-view>
</keep-alive>
  2.监测$router的变化；
watch: {
// 如果路由有变化，会再次执⾏该⽅法
"$route": "fetchDate"
}
  但是会在页⾯离开时再次执⾏fetchDate，并不是我们需要的，所以可以在to和from上添加执⾏逻辑，但也是⼗分的⿇烦
//$router是只读状态，所以赋值操作会失效
watch: {
$route (to, from) {
if（list.indexOf(from.path) > -1）{ //⾃⾏添加逻辑，list为你不想有缓存的路径
        Data()
}
  }
}
  3.在添加keep-alive后会增加两个⽣命周期mounted>activated、离开时执⾏deactivated，路由的进⼊和切换回相应的触发activated和deactivated，这样就可以在每次⼊路由执⾏更细致的操作了
//如果是服务端渲染就算了
activated() {
//只刷新数据，不改变整体的缓存
this.fetchDate();
}
  4.还有更简单粗暴的
//我就笑笑不说话
<div>
<keep-alive>
<router-view v-if="$a.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$a.keepAlive"></router-view>
</div>
  5.还有种情况，在不同路由应⽤了相同的vue组件
{path:'aaa',component:Mompage,name:'mom'},
{path:'bbb',component:Mompage,name:'momPlus'}
  默认情况下当这两个页⾯切换时并不会触发vue的created或者mounted钩⼦，需要⼿动的watch:$router（⼜回到上⾯的步骤），或者在router-view上加上唯⼀值。
//随便抄⼀段代码过来
<router-view :key="key"></router-view>
computed: {
key() {
return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
}
}
  有错误的，请指出

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。