vue调用外链页面,添加header

如果你正在使用 Vue.js 来调用外部网页并需要添加自定义头部，可以考虑使用 Vue 的组件 `iframe`。

在 Vue 组件中，你可以将 `iframe` 元素嵌入其中，并设置 `src` 属性为你想要调用的外部网页链接，然后使用 `sandbox` 属性来限制 iframe 元素的访问权限，以防止安全问题。最后，你可以使用 Vue 组件的模板语法来添加自定义头部。

以下是一个示例代码：

<template>
  <div>
    <iframe :src="externalUrl" sandbox="allow-same-origin"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      externalUrl: 'https://example.com'
    }
  }
}
</script>

<style>
iframe {
  width: 100%;
  height: 100vh;
  border: none;
}

/* 添加自定义头部 */
iframe:before {
  content: "Custom Header";
  display: block;
  height: 50px;
  background-color: #333;
  color: #fff;
  text-align: center;
  line-height: 50px;
}
</style>

在这个示例中，我们使用 `iframe` 元素来加载外部链接，然后使用 CSS 来添加自定义头部。你可以根据需要修改示例代码，并根据具体情况进行调整。