当我们点击search中的搜索功能是会引起浏览器栏的变化,如图
变化前 :
变化后:
但是由于搜索是被单独封装到另一个组件,因此在显示内容是无法实时刷新
如图
可以看出浏览器地址栏发生变化,但是内容好像什么都没有发生改变。
内容部分代码如图
从代码中可以看出,我们的部分数据是从浏览器地址栏中获取,但由于地址栏的变化不会引起vue中数据的变化,因此当我们点击搜索时就会出现浏览器地址栏变了但页面没有刷新。解决这个问题的方式之一可以通过watch监视属性去监视地址栏的变化,也就是监视$route,然后再在这边进行一个数据的更新,但这边又有一个问题,虽然我们数据是更新了但依旧不会引起页面的刷新,原因是因为vue2中data中的数据默认只能检测到浅层次的数据变化,但稍微深一点就检测不到,检测不到就不会引起页面的刷新,我选择的解决方式是在watch监听中我们在数据更新好了之后可以重新掉一次请求方法。如图所示
这样子我们就可以解决页面不刷新的问题了
这种解决办法可能不是很好,但目前我只能想到这种,如有不足,还请多多包涵