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

客官°小女子只卖身不卖艺 2021-12-15 07:07 545阅读 0赞

转载自：[https://www.cnblogs.com/dansingal/p/8302100.html][https_www.cnblogs.com_dansingal_p_8302100.html]

问题描述：

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

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>&lt;transition name=</code> 
      <code>"fade"</code>&nbsp; 
      <code>mode=</code> 
      <code>"out-in"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;keep-alive&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;router-view&gt;&lt;/router-view&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;/keep-alive&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/transition&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

有几种解决方式：

1.在keep-alive中直接添加 include，cachedViews（Array类型：包含vue文件的组件name都将被缓存起来）；反之exclude则是不包含；

注意：所有.vue组件文件都必须附上name属性！！！建议用vuex管理cachedViews

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>&lt;keep-alive :include=</code> 
      <code>"cachedViews"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;router-view&gt;&lt;/router-view&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/keep-alive&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

2.监测$router的变化；

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>watch: { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// 如果路由有变化，会再次执行该方法</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>"$route"</code> 
      <code>:&nbsp;</code> 
      <code>"fetchDate"</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

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

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>//$router是只读状态，所以赋值操作会失效</code> 
     </div> 
     <div> 
      <code>watch: { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>$route (to, from) { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>if</code> 
      <code>（list.indexOf(from.path) &gt; -1）{&nbsp;</code> 
      <code>//自行添加逻辑，list为你不想有缓存的路径</code> 
     </div> 
     <div> 
      <code>　　　　　　　　</code> 
      <code>this</code> 
      <code>.getData()</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}&nbsp;&nbsp;</code> 
     </div> 
     <div> 
      <code>　　}</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

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

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>//如果是服务端渲染就算了</code> 
     </div> 
     <div> 
      <code>activated() { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>//只刷新数据，不改变整体的缓存</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>this</code> 
      <code>.fetchDate();</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

4.还有更简单粗暴的

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>//我就笑笑不说话&lt;br&gt;&lt;div&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;keep-alive&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;router-view v-</code> 
      <code>if</code> 
      <code>=</code> 
      <code>"$route.meta.keepAlive"</code> 
      <code>&gt;&lt;/router-view&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;/keep-alive&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;router-view v-</code> 
      <code>if</code> 
      <code>=</code> 
      <code>"!$route.meta.keepAlive"</code> 
      <code>&gt;&lt;/router-view&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/div&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

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

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>{path:</code> 
      <code>'aaa'</code> 
      <code>,component:Mompage,name:</code> 
      <code>'mom'</code> 
      <code>},</code> 
     </div> 
     <div> 
      <code>{path:</code> 
      <code>'bbb'</code> 
      <code>,component:Mompage,name:</code> 
      <code>'momPlus'</code> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

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

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>//随便抄一段代码过来</code> 
     </div> 
     <div> 
      <code>&lt;router-view :key=</code> 
      <code>"key"</code> 
      <code>&gt;&lt;/router-view&gt;</code> 
     </div> 
     <div> 
      <code>computed: { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>key() { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>return</code>&nbsp; 
      <code>this</code> 
      <code>.$route.name !== undefined?&nbsp;</code> 
      <code>this</code> 
      <code>.$route.name + +</code> 
      <code>new</code>&nbsp; 
      <code>Date():&nbsp;</code> 
      <code>this</code> 
      <code>.$route + +</code> 
      <code>new</code>&nbsp; 
      <code>Date()</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

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

[https_www.cnblogs.com_dansingal_p_8302100.html]: https://www.cnblogs.com/dansingal/p/8302100.html