vue不同路由使用同一个组件重新加载这个组件

vue不同路由使用同一个组件重新加载这个组件

vue不同路由使用同一个组件重新加载这个组件

vue,react,angular都会有一个共同点，那就是如果两个路由用的是一个组件的话，在切换路由的时候组件的生命周期函数并没有被调用，比如有一些想在组件渲染之后调用的钩子函数并不会执行，这是为了性能的考虑。我之前用angular的时候有相应的解决办法，react也有，这里不做探讨，这里只说vue，昨天看到了一个这方面的解决方法，感觉很好，记录下来。

有两种解决方案：

第一种

监听$route的变化来初始化数据，如下：

data() {
  return {
    loading: false,
    error: null,
    post: null
  }
},
watch: {
  '$route': {
    handler: 'resetData',
    immediate: true
  }
},
methods: {
  resetData() {
    this.loading = false
    this.error = null
    this.post = null
    this.getPost(this.$route.params.id)
  },
  getPost(id){
  }
}

第二种

给router-view添加一个unique的key，这样即使是公用组件，只要url变化了，就一定会重新创建这个组件，将key直接设置为路由的完整路径。

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

组件代码就可以正常的书写了，如下：

data() {
  return {
    loading: false,
    error: null,
    post: null
  }
},
created () {
  this.getPost(this.$route.params.id)
},
methods () {
  getPost(postId) {
    // ...
  }
}