系统后台要求点击【可视化大屏】按钮，需要打开新窗口并调用已写好的的页面组件，但不能影响原窗口显示系统页面，，没有具体详细的步骤

以下是一种可能的实现方式：

1. 在前端页面中添加一个按钮，绑定点击事件；

2. 在点击事件中，使用 window.open() 方法打开一个新的窗口；

3. 在新的窗口中，使用 iframe 元素加载已写好的页面组件；

4. 在 iframe 元素中，设置 width 和 height 属性，使页面组件能够正确显示；

5. 在页面组件中，使用相应的数据源获取需要展示的内容，并进行渲染。

具体实现可能需要根据具体的技术栈和组件库进行调整。

相关问题

vue中系统后台要求点击【可视化大屏】按钮，需要打开新窗口并调用已写好的的页面组件，但不能影响原窗口显示系统页面

在Vue中打开新窗口可以使用`window.open()`方法，同时使用`target="_blank"`属性确保在新窗口打开链接。

在Vue中调用组件可以使用Vue Router，在路由配置中定义对应的组件，并使用`router-link`或`router.push()`跳转。

综合以上两点，可以实现点击按钮打开新窗口并调用指定组件的效果：

<!-- 在模板中定义按钮 -->
<button @click="openDashboard">可视化大屏</button>

<!-- 在methods中定义打开新窗口的方法 -->
methods: {
  openDashboard() {
    // 打开新窗口
    const newWindow = window.open('', '_blank')

    // 在新窗口中加载指定路由对应的组件
    newWindow.location.href = `/dashboard`
  }
}

需要注意的是，由于在新窗口中加载组件需要重新加载Vue实例，因此在组件中无法直接获取到原窗口中的数据和状态。如果需要在新窗口中展示特定的数据，可以通过URL参数或者其他方法传递需要的数据。

例如系统后台要求点击【可视化大屏】按钮，需要打开新窗口显示，但不能影响原窗口显示系统页面，网上查询了一圈都是比较片面的只提到了this.$router.resolve，没有具体详细的步骤，由于个人对vue的精髓掌握的不深，所以在此记录一下！

打开新窗口显示可视化大屏，但不影响原窗口的显示，可以通过以下步骤实现：

1. 在 Vue 组件中，通过 this.$router.resolve 方法得到可视化大屏的路由信息，例如：

const routeData = this.$router.resolve({
  name: 'visualization-screen',
  params: { id: '123' }
});

其中，name 参数为可视化大屏页面的路由名称，params 参数为可视化大屏页面需要的参数，例如这里传入的 id 参数。

2. 利用 routeData.href 获取可视化大屏的 url 地址，并通过 window.open 方法打开新窗口：

window.open(routeData.href, '_blank');

其中，'_blank' 参数表示在新窗口中打开链接。

3. 在可视化大屏页面中，需要通过 window.opener 访问原窗口中的数据或方法，例如：

// 获取原窗口中的数据
const data = window.opener.$store.state.data;

// 调用原窗口中的方法
window.opener.handleOpenModal();

其中，$store 和 handleOpenModal() 方法均为原窗口中的数据和方法。需要注意的是，这种方式存在跨域问题，需要在原窗口和新窗口中均设置正确的 CORS 头部信息。