点击刷新
背景：
前端项目做了解耦后，在主项目（浏览器访问的页面）某个菜单下通过iframe加载子项目的页面，在子项目页面下点击某个链接并携带查询参数，通过window.top.PostMessage()函数向外（主项目）传递路由信息，使路由信息能够在外层项目（浏览器地址栏）能够同步展示内层页面的地址信息。
问题描述：
当内层项目向外传递路由信息，携带多个查询参数（如?a=1&b=2）时，如何拼接该参数呢？
ant design vue项目通过路由访问对应菜单可以这样弄：
此处的query即是要查询的参数，拼接好的地址应该是这样的：
/xxx/xxx/plan/detail?project_id=1&plan_id=2
前端分别打印to.path和to.query，是这样的：
那么拼接to.path和to.query可以这样做：
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 })
这样外层就接收到该路径并展示在地址栏：
这样做的好处是在外层获取到这个路由地址后，可以直接从这个地址进入到内层项目的具体某个页面，而不是进入到内层项目主页，方便用户的操作
© 著作权归作者所有
举报
发表评论
0/200
