vue 不完美的多标签页存在问题及解决方案_vue.js

然而，这个方案存在几个问题：

如果给路由添加参数，打开第一次没有任何问题，但如果换另一个参数打开，还会是之前的页面，因为组件被缓存下来了。

新增一个路由 counter，在页面上添加RouterLink，并使用不同的参数

然后再Counter组件中获取id参数，分别点击Counter 1和Counter 2，会发现点击Counter 1时获取到的id是1，点击Counter 2时却没有任何变化，而且两个RouterLink同时是激活状态。

添加一个组件测试生命周期：

先从Home切换到About再切换回Home再切换回About。

查看在不使用KeepAlive切换页面时候的输出，onBeforeMount -> onMounted -> onBeforeUnmount -> onUnMounted 循环

使用KeepAlive的情况，情况就复杂很多，每次切换到页面时会激活onActivated钩子，正常情况下可以通过onActivated钩子获取路由参数，重新获取数据。

问题在于：如果组件可以在缓存与不缓存中切换，在获取数据时，需要考虑是写在onMounted里还是onActivated里，写在onMounted中时如果组件会被服用，需要处理路由参数变化重新获取数据；写在onActivated里，需要考虑组件不缓存了钩子函数不会被调用的情况。

这个问题很好解决，只需要给KeepAlive中的component加上不同的key就可以实现，key可以通过router.fullPath来计算，这样KeepAlive中就可以缓存同一个组件多次。

同时，修改下Counter组件，查看生命周期

会发现，虽然是同一个组件，但生命周期也独立了，也就不需要考虑路由参数变化时重新获取数据，只需要在onMounted时获取一次数据就可以了。

上面的问题好像一下就解决了，但第三个目标没有实现，这也是最难的一个问题。

KeepAlive可以通过给component添加不同的key达到路由多开的效果，但是却不能用key删除，KeepAlive只能通过exclude参数使用组件名称删除缓存。

这下问题麻烦了，虽然使用不同的key多开了路由，但路由的组件名称是相同的，也就是说，就算能多开了，关闭却只能全部关闭，这种是不行的。

思索后，想到了下面的方案：

编写一个TagView组件，替代RouterView+KeepAlive，关闭的时候直接删除tagView就可以

样式随便写的，明白意思就好。

优点：编写起来很简单

缺点：之前的组件一直保留，打开的页面多了可能会卡

总结：也算一种可行的方案，但要注意页面不能太多

之前的组件只是display: none了

上面其实解决了最大的问题，但是还可以优化一下，可以利用KeepAlive卸载dom并缓存。

基于上面的方案，在Component外面再套一层KeepAlive，然后将v-show改成v-if。

这样就解决了打开页面太多可能会导致的性能问题，但是在DevTool中就会看到很多个KeepAlive了，这也是一种取舍吧。

上面的解决方案并不完美，要么容易影响性能，要么可能会影响开发(多个KeepAlive在DevTool里)，要完美的话估计只能自己实现一个KeepAlive了。

上一篇：Nextjs应用变慢的8个原因及解决办法javascr

下一篇：Vue3前端项目实现动态显示当前系统时间详解