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

clipboard.png
类似这种新闻列表,在当前页面如果直接写¥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)
        }
      }
  }

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

回答:

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

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

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

回答:

//mode: ‘history’

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

回答:

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

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

回答:

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注