美文网首页
vue-cli3项目中路由不变,路由参数变化,页面不刷新的解决办

vue-cli3项目中路由不变,路由参数变化,页面不刷新的解决办

作者: 颂温暖 | 来源:发表于2019-07-12 10:13 被阅读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的变化来进行数据的实时更新

相关文章

网友评论

      本文标题:vue-cli3项目中路由不变,路由参数变化,页面不刷新的解决办

      本文链接:https://www.haomeiwen.com/subject/utnskctx.html