9
Vue同一路由跳转页面不刷新解决方案及注意事项之二
source link: https://www.daozhao.com/9941.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Vue同一路由跳转页面不刷新解决方案及注意事项之二
如果您发现本文排版有问题，可以先点击下面的链接切换至老版进行查看！！！
Vue同一路由跳转页面不刷新解决方案及注意事项之二
之前写过一个《Vue同一路由跳转页面不刷新解决方案及注意事项》，在这篇文章里面鞋到了怎么解决这个问题，具体内容可以点击查看，这里简单说一下，就是利用将时间戳传给路由的query，也就导致$route.fullPath不一样，然后配合key来解决。同时也提到了这样做的缺陷，缺点就是组件内的路有生命周期beforeRouteLeave不执行了，我们通常在这个周期里面做一些例如编辑文章时突然要跳走，可以来提示是否保存草稿的事情。
其实我们看官网可以发现其实Vue官方是在vue-rroute2.2版本中引入的 beforeRouteUpdate，这个钩子的。
还是在之前的代码中进行测试，我们从/goNext跳转到/goBack页面。
这时肯定没有问题，goNext里面的beforeRouteLeave周期是会执行的， beforeRouteUpdate是没有的。
现在我们从/goNext跳转到/goNext?ts=12123323232页面。
beforeRouteLeave周期没有执行的， 但是beforeRouteUpdate执行了，我们之前需要的比如跳转前提示保存草稿场景中，我们原本写在beforeRouteLeave周期里面的代码就可以在beforeRouteUpdate再写一份了，这样的话就能达到保证给予跳转前提示的作用了，并且这两个钩子只会执行一个，这样我们也不用自行区分了，是不是很棒，感谢Vue官方。Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK