vue项目解耦后，主项目iframe内加载子项目，当子项目触发路由携带多个参数时，如何向主项目传递消息，在主项目（浏览器）中展示路由和查询参数信息

router.afterEach((to) => {
  console.log(‘to.path in afterEach in xxx‘, to.path)
  console.log(‘to.query in afterEach in xxxd:‘, to.query)
  console.log(‘Object.getOwnPropertyNames(to.query): ‘, Object.getOwnPropertyNames(to.query))
  // （异步方法）监听到路由变化，将将路由信息传递给外层
  var queryPath = `${to.path}`
  var propertyNames = Object.getOwnPropertyNames(to.query)
  if (to.query) {
    console.log(‘to.query has more than two attribute‘)
    for (var i = 0; i < propertyNames.length; i++) {
      if (i === 0) {
        queryPath += `?${propertyNames[i]}=${to.query[propertyNames[i]]}`
      } else {
        queryPath += `&${propertyNames[i]}=${to.query[propertyNames[i]]}`
      }
    }
  } else {
    queryPath = to.path
  }
  console.log(‘queryPath in xxx:‘, queryPath)
  // window.top.postMessage(to.path, to.query)
  window.top.postMessage(queryPath, ‘*‘)
  // window.top.postMessage(to.path, ‘*‘)
  NProgress.done() // finish progress bar
})