router路由与页面信息不同步问题解决方案

问题描述

页面中信息是根据路由中携带的id查询出来的。

在推荐界面，点击页面跳转到对应的推荐详情页。

但是发现，仅仅是路由改变了。但是页面的内容却没改变。需要自己刷新才可以。

问题分析

该问题的主要原因是没有把route中id的改变与页面内容关联在一起。

最开始二者关联的原因是页面刚加载的时候路由和内容在时间上达到了同步。

但是二者并没有关联。路由改变不会触发内容改变。

所以解决问题的关键在于将二者关联起来。

解决方案

通过watch监听route里的id，当id发生改变的时候，那说明页面内容页需要改变。这时进行页面刷新。

// 刷新页面数据函数
const loadPaperData = () => {
  selectPaperById(route.query.id).then((res) => {
    if (res.code === '200') {
      paper.value = res.data
    } else {
      ElMessage.error(res.msg)
    }
  })
}

// watch监听函数
watch(
  () => route.query.id,
  () => {
    loadPaperData()
  },
)

注意一个细节。使用watch监听reactive对象，需要用一个函数来返回其值。

思考

这个问题的主要症结在于没有数据关联。

当日后遇到所有一个变，其他没有跟着变的问题。只需要连接他们之间的关系就好了。