vue如何实现不同路由的组件复用

这篇文章主要为大家展示了"vue如何实现不同路由的组件复用"，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下"vue如何实现不同路由的组件复用"这篇文章吧。

不同路由的组件复用

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如何实现不同路由的组件复用"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！