vue如何在一个页面点击某事件携带参数跳转另外页面？

产品需求

后台系统有一个主页面，里面包含了另外其他页面的数据汇总，点击某个字段要跳到对应页面去详细查看其数据。
如图：点击橙色数字便会跳到相应页面去看具体数据

实现方法

1.首先要给橙色数据添加相应的点击事件，并携带必要的参数，例如当前行的某些数据。我这里是需要传对应的工厂。
代码如下：

// An highlighted block
          <template slot-scope="scope">
            <span
              class="cursor"
              @click="jumpDetail('directRate',scope.row.directRate,scope.row.factoryId)"
            >
              {{ scope.row.directRate }}
            </span>
          </template>

2.因为有很多数据我选择用switch来进行不同页面的跳转。
代码如下：

      switch (value) {
        case 'directRate':
          this.$router.push({ path: '/fastReport/rolledYield' })
          break
        case 'finalExamRate':
          this.$router.push({ path: '/fastReport/inspactQualified' })
          break
        case 'firstExamRate':
          this.$router.push({ path: '/fastReport/productQualified' })
          break
        case 'incomingBacthRate':
          this.$router.push({ path: '/fastReport/onlineDefective' })
          break
        case 'repairRate':
          this.$router.push({ path: '/fastReport/poorMaintenance' })
          break
        default:
          break
      }

【注】此时遇到一个问题，由于跳转到的页面需要使用缓存，所以需要把主页面点击的 橙色数据对应的一些数据 暂时保存在window的缓存中，方便跳转到的页面去调用。

增加缓存到window

window.sessionStorage.setItem('facQltValue', JSON.stringify(params))```

取出缓存使用

this.routerData = JSON.parse(window.sessionStorage.getItem('facQltValue'))

3.大家肯定会说一些参数可以放到switch中的query/params去携带，我之前也是这样写的，但是公司会对一些安全性考虑，到最后选择以这种方式把参数携带过去。

好了，如果大伙有其他好的建议或者疑问，欢迎提出来(●ˇ∀ˇ●)~