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

weixin_strponit

于 2020-03-16 11:24:32 发布

阅读量944

点赞数

分类专栏： router

本文链接：https://blog.youkuaiyun.com/weixin_42727360/article/details/104895217

版权

router 专栏收录该内容

4 篇文章

订阅专栏

场景：需求是从/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>