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

【Vue】为什么vue路由点击列表页进对应的详情页，打开页面需刷新才是当前的页面?
类似这种新闻列表，在当前页面如果直接写￥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)这样不行吗？

以上是 【Vue】为什么vue路由点击列表页进对应的详情页，打开页面需刷新才是当前的页面? 的全部内容， 来源链接： utcz.com/a/75695.html

回到顶部