vue路由在keep-alive下的刷新问题 对watch的影响

转载自：https://www.cnblogs.com/dansingal/p/8302100.html

 

问题描述：

　　在keep-alive中的在跳转到指定的路由时刷新对应的路由，其余不刷新。

1 2 3 4 5

<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

1 2 3

<keep-alive :include= "cachedViews" >        <router-view></router-view> </keep-alive>

　　2.监测$router的变化；

1 2 3 4

watch: {      // 如果路由有变化，会再次执行该方法     "$route" :  "fetchDate" }

　　但是会在页面离开时再次执行fetchDate，并不是我们需要的，所以可以在to和from上添加执行逻辑，但也是十分的麻烦

1 2 3 4 5 6 7 8

//$router是只读状态，所以赋值操作会失效 watch: {      $route (to, from) {          if （list.indexOf(from.path) > -1）{  //自行添加逻辑，list为你不想有缓存的路径 　　　　　　　　 this .getData()          }   　　} }

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

1 2 3 4 5

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

　　4.还有更简单粗暴的

1 2 3 4 5 6

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

　　5.还有种情况，在不同路由应用了相同的vue组件

1 2	{path: 'aaa' ,component:Mompage,name: 'mom' }, {path: 'bbb' ,component:Mompage,name: 'momPlus' }

　　默认情况下当这两个页面切换时并不会触发vue的created或者mounted钩子，需要手动的watch:$router（又回到上面的步骤），或者在router-view上加上唯一值。

1 2 3 4 5 6 7

//随便抄一段代码过来 <router-view :key= "key" ></router-view> computed: {      key() {          return  this .$route.name !== undefined?  this .$route.name + + new  Date():  this .$route + + new  Date()      }   }

转载于:https://www.cnblogs.com/blitheG/p/11014871.html