用watch监听路由参数变化，解决页面不刷新问题

问题背景

出现此类bug，大多数情况下是因为在点击知识库其他内容时，没有重新调接口。

<template>
<div>
  <div :class="{'expand': expand}">
    <div class="cata-item flex" :class="{'active': item.baseId === $route.params.id}">
      <i class="nb-pull-down" :class="{'expand': expand}"
      v-if="item.childrenList.length > 0"
      @click="expand = !expand"></i>
      <div v-else class="cata_i_holder"></div>
      <div class="title nowrap" @click="jump(item)">{{item.title}}</div>
    </div>
  </div>
  <div class="ml23" v-for="cata in item.childrenList" :key="cata.id">
    <CataShowTree :item="cata"></CataShowTree>
  </div>
</div>
</template>
<script>
export default {
  name: 'CataShowTree',
  props: ['item'],
  data () {
    return {
      expand: false
    }
  },
  methods: {
    jump (item) {
      if (item.link) {
        window.open(item.link, '_blank')
      } else if (item.baseId) {
        this.$router.push(`/base/${item.baseId}`)
      }
    }
  }
}
</script>

从代码中，我们可以看到，当点击目录的标题时，会在原窗口中打开新的内容，而我们的评论组件是在首次打开窗口时调用接口。

也就是说，当打开第一条内容时，我们调用了评论的相关接口，再在原窗口中打开其他内容时，评论的接口并没有随着内容的切换，而再次调用接口，所以显示的永远是第一条内容所属的评论。

解决方法

当切换内容时，虽然没有重新打开页面，但是他的路由是发生变化的。

所以，我们可以监听路由的变化，一旦路由变了，我们就重新调用接口。

当我们把ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。

 watch: {
    '$route.params.id' () {
      let _refs = this.$refs
      _refs.Comment.fetchData()
    }
  },

这段代码的意思就是，当路由id发生变化时，重新调用子组件Comment里面的fetchData方法。

async fetchData () {
   let _params = {
        rid: this.$route.params.id,
        type: 'base'
   }
   let { data } = await getCommentListApi(_params)
   this.replys = data.list || []
}

fetchData方法中调用了获取评论列表的接口，就会重新调用接口，更新页面的数据。