vue 页面嵌入别的系统如何写

在Vue.js中嵌入其他系统的页面通常涉及到前端与后端的交互和异步加载。以下是基本步骤：

1. 使用`<iframe>`标签：最简单的方式就是直接在Vue组件内使用`<iframe>`元素，设置src属性指向目标系统的URL，例如：

<template>
  <div>
    <iframe :src="externalSystemUrl" frameborder="0"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      externalSystemUrl: 'https://target-system.com/path',
    };
  },
};
</script>

记得替换`https://target-system.com/path`为你实际的目标地址。

2. 使用Vue的动态组件：如果嵌入内容是从服务器返回的部分HTML，你可以使用动态组件配合路由懒加载，创建一个`component`属性指向一个函数，该函数返回外部系统的组件实例，比如：

<template>
  <component :is="currentComponent" />
</template>

<script>
import TargetComponent from './ExternalSystem.vue';

export default {
  data() {
    return {
      currentComponent: null,
    };
  },
  computed: {
    async externalComponent() {
      const response = await fetch('http://your-api.com/load-external-component');
      if (response.ok) {
        const html = await response.text();
        const targetComponentInstance = Vue.compile(html).createVNode(); // 编译并挂载
        this.currentComponent = targetComponentInstance;
      } else {
        throw new Error('Failed to load external component.');
      }
    },
  },
};
</script>

这里假设你有一个API能返回HTML字符串。