码迷,mamicode.com
首页 > 其他好文 > 详细

vue路由在keep-alive下的刷新问题

时间:2018-01-17 13:48:36      阅读:4739      评论:0      收藏:0      [点我收藏+]

标签:list   vue   mode   监测   live   script   文件   渲染   log   

问题描述:

  在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上添加执行逻辑,但也是十分的麻烦

$route (to, from) {
    if(list.indexOf(from.path) > -1){ //自行添加逻辑,list为你不想有缓存的路径
        this.getData()
    }   
}

  3.在添加keep-alive后会增加两个生命周期mounted>activated、离开时执行deactivated,这样就可以在每次入路由执行更细致的操作了

//如果是服务端渲染就算了 
activated() { //只刷新数据,不改变整体的缓存 this.fetchDate(); }

  4.还有更简单粗暴的

//我就笑笑不说话
<div> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> </div>

  

vue路由在keep-alive下的刷新问题

标签:list   vue   mode   监测   live   script   文件   渲染   log   

原文地址:https://www.cnblogs.com/dansingal/p/8302100.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!