页面跳转处理工具

引入文件

  //  现在写法
  import { skipPageEngine }  from 'suit-promis-front-components'
  // 之前写法
  import  skipPageEngine  from '@/utils/skipPageEngine'

页面跳转设置

  skipPageEngine.skipPage(this, val, true)

提示

skipPage方法参数有四：context是执行上下文this；info是进行跳转的相应某项数据；isSame是否为同一平台；tag是在某个各个类型相对于路径、平台的数组中进行比对的字段，默认tag。先比对出数据应对应的相应跳转路径等，把得到的数据的路径添加到路由，而后把info存储到vuex的pageParams字段中。

初始化设置

  mounted() {
    // 跳转引导
    skipPageEngine.guide(this, {
      noReadControl: 'approvalFun',
      readControl: 'viewFun',
      getApi: get
    })
  },

提示

在会被跳转到的页面的mounted阶段阶段进行跳转引导而后进行相应的操作（如：定位到某条数据的选中状态、打开某条数据对应的弹框等），通过skipPage的跳转就能及时进行相应处理。guide方法参数有二：context是执行上下文this；options是相关参数如：noReadControl（未读的参数名，参数传入相应的打开未读状态的方法名）、getApi（获取弹框内容的接口）等。

pageParams的监听

  this.initWatch(context)

提示

initWatch方法会对vuex中的pageParams字段进行监听，此方法有效的前提是在skipPage方法中获取到数据详情后存储在vuex中。监听到变化后进行getInfo方法操作。

根据参数查询信息

  this.getInfo(pageParams)

提示

getInfo方法是在initWatch方法中监听到变化后进行的操作，参数是变化之后的值。先对参数中的param字段进行处理成js对象。如果获取的数据的详情的sight字段不为true，则表示此消息还是未读状态，点击跳转后消息应为已读，此时判断sight字段后进行已读的接口调用。然后进行guide方法传入的getApi的接口调用，参数传入param处理的对象。接口的值传入actionControl方法进行处理。

行为控制

  this.actionControl(info, sight)

提示

actionControl方法参数有二：其中sight是根据监听pageParams时获取的变化值中的sight字段来（表点击跳转过来时需要进行已读控制还是未读控制）；info就是getInfo方法时调用接口获取的值。相应判断后根据初始化设置时noReadControl或readControl参数对应的值来进行运行处理。

组件源码及综合示例参考

源码 (opens new window)示例 (opens new window)