需求:
1、外部页面为一个html页面,后端返回后html链接前端直接渲染
2、跳转至外部链接后,如何返回至项目内部页面,再外部链接刷新页面
方案:
vue rourer 官方文档:https://router.vuejs.org/zh/guide/essentials/navigation.html
提供了想要导航到不同的 URL,使用router.push 方法。这个方法会向 history 栈添加一个新的记录,当用户点击浏览器后退按钮时会返回到之前的 URL。
具体实现如下:
name :‘ReportDetail’ ReportDetail是在路由中配置的渲染外部html的vue组件名称
带查询参数 qyery: {id:id} 传给子组件的值
路由配置:name与 router.push 中的name的名称保持一致
子组件:使用iframe 渲染外部页面
<iframe ref="iframe" :src="url"
marginwidth="0"
marginheight="0"
frameborder="0"
width="100%"
height="100%"
></iframe>
src="url" 为渲染的外部组件的url
子组建接收传入的id值方式
this.$route.query.id
请求接口返回渲染外部接口的链接,获取到链接后赋值给url