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

你可以按照以下步骤来实现在 Vue 中打开新窗口并调用已经写好的页面组件：

1. 在 Vue 组件中添加一个按钮，用于触发打开新窗口的事件。

2. 在按钮的点击事件中，使用 JavaScript 中的 `window.open()` 方法打开一个新窗口，并指定要打开的页面的 URL。例如：

   window.open('/dashboard', '_blank');

这里的 `/dashboard` 是你已经写好的可视化大屏页面的路由地址。

3. 在可视化大屏页面对应的 Vue 组件中，使用 `vue-router` 来注册路由。例如：

   const routes = [
     {
       path: '/dashboard',
       component: Dashboard
     }
   ];
   
   const router = new VueRouter({
     routes
   });

这里的 `Dashboard` 是你已经写好的可视化大屏页面组件。

4. 在可视化大屏页面组件中，你可以根据需求来编写具体的业务逻辑和渲染代码。

请注意，在打开新窗口时，可能会被浏览器的弹出窗口拦截器拦截。为了避免这种情况，你可以在打开新窗口之前先让用户进行确认，或者在浏览器中设置允许弹出窗口。

相关问题

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 头部信息。