vue3 嵌套外部页面 除了iframe还有什么方法？

除了使用 iframe，还有一种方法是使用 Vue 的异步组件来嵌套外部页面。这种方法可以通过动态加载外部页面的内容并将其作为组件渲染到 Vue 应用中。

下面是一个示例：

首先，创建一个名为 ExternalPage.vue 的组件文件，用于渲染外部页面的内容。例如：

<template>
  <div>
    <div v-if="loading">Loading...</div>
    <div v-else v-html="content"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      content: ''
    }
  },
  mounted() {
    this.loadExternalPage()
  },
  methods: {
    loadExternalPage() {
      // 发起异步请求获取外部页面的内容
      // 你可以使用 axios 或其他方式来获取内容
      // 这里仅作示例，直接使用了一个简单的 fetch 请求
      fetch('https://example.com/external-page')
        .then(response => response.text())
        .then(data => {
          this.loading = false
          this.content = data
        })
        .catch(error => {
          console.error(error)
          this.loading = false
          this.content = 'Failed to load external page.'
        })
    }
  }
}
</script>

在上面的代码中，我们使用了一个 loading 变量来表示是否正在加载外部页面的内容，并使用 content 变量来存储外部页面的内容。在组件的 mounted 钩子函数中，我们调用了 loadExternalPage 方法来异步加载外部页面的内容。

接下来，在你的路由配置中，将该组件与相应的路径关联起来。例如：

const routes = [
  {
    path: '/external',
    name: 'ExternalPage',
    component: () => import('@/views/ExternalPage.vue')
  },
  // 其他路由配置...
]

在上面的代码中，我们使用了 Vue 的异步组件语法，通过 `() => import('@/views/ExternalPage.vue')` 来动态加载 ExternalPage.vue 组件。

最后，在你的模板中，可以通过 `<router-view>` 标签来显示路由对应的组件。例如：

<template>
  <div id="app">
    <!-- 其他内容... -->
    <router-view></router-view>
  </div>
</template>

现在，当你访问 '/external' 路径时，Vue Router 将会渲染 ExternalPage 组件，并在组件中异步加载外部页面的内容。

希望这个方法对你有帮助。如果还有其他问题，请随时提问。