vue的坑多的数不胜数了,今天碰见一个看着确实很容易解决实际解决翻找处理非常麻烦的一个坑。今天接到了一个简单的需求(可以不看,这段没用),要求在导航栏加上菜单切换之后可以重新渲染左侧树,左侧的树要再次触发跳转。。。。。。。。
需求就不说了。功能点其实很简单,最后需要实现的功能就一点。《自己跳转自己》。query或者params 参数变一下就可以了!但,就这么简单的问题vue实现不了。因为vue有缓存机制,这个缓存机制和keep-alive没有关联,当router跳转时,如果你跳转的新路由地址和旧的地址是相同的path或者name。那么vue会触发自己的缓存机制。从而不触发任何生命周期。但是router.push 其实是生效了的。他不是没有跳转,跳了,但是也仅仅是跳了。这个算是vue的bug吗。或许不算,因为可能在开发者的眼中这是一个避免重复请求方法钩子的好方法。但是为啥不动脑袋想想,我们使用者为什么会自己跳自己呢。。。或许这不是个bug但是我感觉绝对算个大坑。看了网上几个大神的解决方式亲测都无效。
方式1:给router-view添加key
<template>
<div>
<router-view :key="key"></router-view>
</div>
</template>
<script>
export default {
name: 'RouteView',
computed: {
key () {
return this.$route.name + Math.random()
}
}
}
</script>
逻辑是每次跳转的时候给key后面拼接一个随机数让router-view感觉没个路由都是不一样。逻辑很通顺,但是亲测无效。这个方式会让你整个路由整体大刷新。如果你是子路由跳转子路由的同路径这个方式是无效的。相当于window.location.reload 这根本没有意义。
方式2:router.histry.go(0) dactived 等等等
亲测无效都是相当于整体刷新页面,这种完全是js的处理方式也解决不了咱们的问题,页面整体刷新同上也不是我们想要的效果。
方式3:将子路由跳转彻底替换,换成组件切换,传值。
亲测有效。是的,最后还是没办法处理。也可能这是一个没有办法处理的问题,因为不论是监听还是如何都是不能完美的解决这个需求。只能把子路由切换成组件传值,或者是原声开发。也希望有能解决的大神提供一下对应的解决方案。