产品需求
后台系统有一个主页面,里面包含了另外其他页面的数据汇总,点击某个字段要跳到对应页面去详细查看其数据。
如图:点击橙色数字便会跳到相应页面去看具体数据
实现方法
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去携带,我之前也是这样写的,但是公司会对一些安全性考虑,到最后选择以这种方式把参数携带过去。
好了,如果大伙有其他好的建议或者疑问,欢迎提出来(●ˇ∀ˇ●)~