携带数据跳转页面，数据不渲染问题的解决

一.问题背景：一个输入物体尺寸，对尺寸的各个参数进行计算，最后生成文档的一个后台系统（像是一个高级一点的计算器）

                标志统计：他就是把计算的各个参数存储起来的一个地方，里面有编辑新增按钮，点击之后就会带着物体尺寸信息跳转到计算页，计算页拿到这个数据之后需要把这个数据显示到计算页面当中

二.界面展示

标志统计页面：

计算页面：

带数据跳转到计算页展示：

三.问题描述：

我遇到的问题是：先点击正三角计算页面，让正三角组件加载完成之后，再点击标志统计页面里面的编辑新增时，跳转正三角计算页并不会将带过来的数据显示在计算界面里面。

        但是，我在进入系统之后直接点击标志统计按钮跳转到正三角计算页面时，这个时候就可以将带过来的数据正常渲染到界面里面。

四.问题解决

        首先，我的数据挂载写在mounted函数当中。

        那么上面描述的两种情况到底有什么区别呢？

        问题的关键在与第二种情况正三角计算组件已经加载完毕，然后再跳转到计算页，但此时正三角计算页的组件没有被销毁，这意味着组件被vue复用了，Vue会复用已经存在的组件实例，则计算页的mounted函数将不会被执行。因为mounted函数只在组件挂载时被执行一次。所以数据并没有被挂载页面中。

        解决：在点击编辑新增到跳转到正三角计算页的这个过程中，路由是变化了的，我们可以监听路由变化，在路由变化的时候执行一遍挂载数据的函数，这个时候数据就可以正常显示在界面当中了。

watch: {
    $route(to, from) {
      // 路由发生变化时执行的操作
      // console.log('路由发生变化')
      // console.log('新的路由对象:', to)
      // console.log('旧的路由对象:', from)
      this.fetchData()
      // 执行其他操作...
    }
  }

this.fetchData()函数是拿到传过来的数据并往页面上渲染数据的函数。

至此，问题就已经被解决了。如果还有什么问题的话可以私信我哦，看见会即使回复的。