这一个奇怪的bug困扰了我2天半,浪费了我很多时间来反复修改调试找问题,最后虽然找到了问题点,但是依然不知道是怎么发生的。
和网上很多其它能找到的页面不刷新的问题不同,他们要么是忘了写`<router-view>`,要么就是靠给`<router-view>`加key来解决缓存问题。而我这里的症状是页面加载后直接显示了最后一个路由的内容,不管点哪个链接都会显示最后添加的路由组件的内容。
最后我在控制台打出了所有组件的渲染函数和data函数才发现,并不是vue在渲染时选错了渲染对象,而是所有组件的渲染函数和data函数都直接指向了最后一个路由的函数,但我并没有代码去动态修改这些组件的函数,于是我在某个组件的data函数里填了一点数据再测试,问题就解决了。
由于是测试组件,原本data返回的对象是空的,像这样:
export default { data() { return { }; }, }
填完数据之后变成这样:
export default { data() { return { poi:'poipoi', }; }, }
然后这一个组件里面就不会自动变成最后一个路由组件的render函数和data函数了,但如果两个组件里面data返回的对象填写的内容也一样,那么前一个组件里面的这两个函数依然会指向后一个的,这在代码逻辑上怎么都讲不通,只能说应该是在某个优化环节出问题了,把字面一样的函数直接简化成了同一个,然后就产生了这种所有路由组件全部渲染出最后一个组件的内容的情况。
本文发布于 https://luojia.me
本站文章未经文下加注授权不得拷贝发布。