欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue页面跳转后数据竟然没更新

程序员文章站 2022-06-03 09:38:08
...

场景:需求是从/post-page/a,跳转到/post-page/b。然后我们惊人的发现,页面跳转后数据竟然没更新?原因是vue-router发现这是同一个组件,然后它就决定要复用这个组件。
之前:监听$route的变化来初始化数据

 data(){
       return {
          loading: false,
     }
 },

watch:{
      '$route':{
        handler: 'resetData',
        immediate: true
  }
},

methods:{
    resetData(){
     this.loading = false,
     this.getPost(this.$route.params.id)
   },
    getPost(id){
   }
}

现在:
给router-view添加一个unique的key,这样即使是公用组件,只要url变化了,就一定会重新创建这个组件

   <router-view :key='$router.fullpath'></router-view>
相关标签: router