vue-cli3项目中路由不变,路由参数变化,页面不刷新的解决办
2019-07-12 本文已影响0人
颂温暖
对vue中的computed计算属性不熟练,这里就不多说,我是用的是另一种方式watch监听
就是我们通过vue的导航守卫,跳转页面的时候采用query模式
this.$router.push({
name: 'index',
query: {
news_id: this.news_id,
cat_one_id: this.cat_one_id
}
})
跳转页使用如下方式来获取参数
this.$route.query.news_id
this.$route.query.cat_one_id
最后路由跳转回带着参数传递,例如
http://192.168.0.114:8080/#/examInfor?news_id=45&cat_one_id=6
跳转到
http://192.168.0.114:8080/#/examInfor?news_id=50&cat_one_id=1
参数改变,但是页面数据没有更新
这个问题导致出现的原因是因为链接参数改变的时候,没有实时监测到参数id的改变而进行数据重新渲染
解决办法-------采用watch监听参数变化来更新数据
watch: {
'$route' (to, from) { // 监听路由是否变化
if (to.query.news_id !== from.query.news_id) {
this.id = to.query.news_id
this.getInfo() // 重新加载数据
}
}
},
methods: {
// 获取文章详情
getInfo () {
this.$http.post('/news/getNewDetail', {
news_id: this.id
}).then((res) => {
this.articleInfor = res.data.data
var time = this.getDay(this.articleInfor.publish_time)
this.articleInfor.publish_time = time
this.downLoad(this.articleInfor.download_name)
})
},
}
这样就实现了通过监测参数id的变化来进行数据的实时更新