vue如何实现不同路由的组件复用
这篇文章主要为大家展示了“vue如何实现不同路由的组件复用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue如何实现不同路由的组件复用”这篇文章吧。
麟游网站制作公司哪家好,找创新互联!从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作,到程序开发,运营维护。创新互联从2013年成立到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联。
不同路由的组件复用
1 场景还原
当某个场景中vue-router从/post-page/a,跳转到/post-page/b。然后我们惊人的发现,页面跳转后数据竟然没更新?!原因是vue-router"智能地"发现这是同一个组件,然后它就决定要复用这个组件,所以你在created函数里写的方法压根就没执行。通常的解决方案是监听$route的变化来初始化数据,如下:
data() { return { loading: false, error: null, post: null } }, watch: { '$route': { // 使用watch来监控是否是同一个路由 handler: 'resetData', immediate: true } }, methods: { resetData() { this.loading = false this.error = null this.post = null this.getPost(this.$route.params.id) }, getPost(id){ } }
2 优化
那要怎么样才能实现这样的效果呢,答案是给 router-view 添加一个不同的key,这样即使是公用组件,只要url变化了,就一定会重新创建这个组件。
还可以在其后加 + +new Date() 时间戳,保证独一无二
以上是“vue如何实现不同路由的组件复用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
当前文章:vue如何实现不同路由的组件复用
文章地址:http://myzitong.com/article/pejsjj.html