为什么vue路由点击列表页进对应的详情页，打开页面需刷新才是当前的页面?

Question

类似这种新闻列表，在当前页面如果直接写￥route.params.id可以获取到点击的时候传过来的参数，把参数赋给axios的url，进行接口调用，显示页面，但是当点击一次之后，返回列表继续点击，进入的详情页面依然是上一个 详情页，只有刷新一下才会成为当前的详情页？
我是刚刚接触vue的小白，想问一下各路大神们这时什么原因呢？如何解决？

import {mapActions, mapState, mapGetters} from 'vuex'

  import axios from 'axios'

  axios.defaults.baseURL = 'http://120.77.215.34:9001';

  export default{

      data(){

        return {

            detail:{},

            title:"",

            createAt:"",

            content:"",

            id:this.$route.params.id

        }

      },

      created(){

        axios.get("/news/detail",{

          params:{

            id:this.id

          }

        }).then(res=> {

          this.title = res.data.news.title;

          this.createAt = res.data.news.createAt;

          this.content = res.data.news.content;

        })

      watch: {

        '$route' (to, from) {

          // 获取最新的id 调用获取数据方法

          this.getData(this.id)

        }

      }

  }