Vue-不同路由的组件复用

本是古典 何须时尚 2023-07-21 05:26 72阅读 0赞

场景还原

当某个场景中vue-router从/post-page/a，跳转到/post-page/b。然后我们惊人的发现，页面跳转后数据竟然没更新？！原因是vue-router”智能地”发现这是同一个组件，然后它就决定要复用这个组件，所以你在created函数里写的方法压根就没执行。通常的解决方案是监听$route的变化来初始化数据，如下：

  1. data() {
  2.   return {
  3.     loading: false,
  4.     error: null,
  5.     post: null
  6.   }
  7. },
  8. watch: {
  9.   '$route': {        // 使用watch来监控是否是同一个路由
  10.     handler: 'resetData',
  11.     immediate: true
  12.   }
  13. },
  14. methods: {
  15.   resetData() {
  16.     this.loading = false
  17.     this.error = null
  18.     this.post = null
  19.     this.getPost(this.$route.params.id)
  20.   },
  21.   getPost(id){ }
  22. }

优化

为了实现这样的效果可以给router-view添加一个不同的key，这样即使是公用组件，只要url变化了，就一定会重新创建这个组件。

  1. <router-view :key="$route.fullpath"></router-view>

还可以在其后加+ +new Date()时间戳，保证独一无二

如果组件被放在中的话，可以把获取新数据的方法放在activated钩子，代替原来在created、mounted钩子中获取数据的任务。

juejin.im/post/5ae02f39518825672f198ac2

发表评论

表情：
评论列表 （有 0 条评论，72人围观）

还没有评论，来说两句吧...

相关阅读