为什么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)
        }
      }
  }

这时我写的代码，望高人指导~~

Answer 1

经过多方摸索，问题已解决，感谢楼上给位提供给的思路！

watch: {
      '$route'(to,from){
        this.id=this.$route.params.id;
        this.fetchData();
      }
    },

解决方法：watch的route监听的时候不仅要监听method这个方法，并且要单独监听当前的参数，就ok！

Answer 2

//mode: 'history'

去掉就行了
或者 手动
router.refresh() 刷新操作

Answer 3

监控一下路由变化，重新执行一下你的创建方法。

watch: {
    '$route': '更新数据的方法'
},

Answer 4

created>mounted(如果是keep-alive使用actived)这样不行吗？