例如系统后台要求点击【可视化大屏】按钮,需要打开新窗口显示,但不能影响原窗口显示系统页面,网上查询了一圈都是比较片面的只提到了this.$router.resolve,没有具体详细的步骤,由于个人对vue的精髓掌握的不深,所以在此记录一下!
时间: 2023-06-24 21:05:06 浏览: 50
打开新窗口显示可视化大屏,但不影响原窗口的显示,可以通过以下步骤实现:
1. 在 Vue 组件中,通过 this.$router.resolve 方法得到可视化大屏的路由信息,例如:
```javascript
const routeData = this.$router.resolve({
name: 'visualization-screen',
params: { id: '123' }
});
```
其中,name 参数为可视化大屏页面的路由名称,params 参数为可视化大屏页面需要的参数,例如这里传入的 id 参数。
2. 利用 routeData.href 获取可视化大屏的 url 地址,并通过 window.open 方法打开新窗口:
```javascript
window.open(routeData.href, '_blank');
```
其中,'_blank' 参数表示在新窗口中打开链接。
3. 在可视化大屏页面中,需要通过 window.opener 访问原窗口中的数据或方法,例如:
```javascript
// 获取原窗口中的数据
const data = window.opener.$store.state.data;
// 调用原窗口中的方法
window.opener.handleOpenModal();
```
其中,$store 和 handleOpenModal() 方法均为原窗口中的数据和方法。需要注意的是,这种方式存在跨域问题,需要在原窗口和新窗口中均设置正确的 CORS 头部信息。
相关问题
vue中系统后台要求点击【可视化大屏】按钮,需要打开新窗口并调用已写好的的页面组件,但不能影响原窗口显示系统页面
在Vue中打开新窗口可以使用`window.open()`方法,同时使用`target="_blank"`属性确保在新窗口打开链接。
在Vue中调用组件可以使用Vue Router,在路由配置中定义对应的组件,并使用`router-link`或`router.push()`跳转。
综合以上两点,可以实现点击按钮打开新窗口并调用指定组件的效果:
```html
<!-- 在模板中定义按钮 -->
<button @click="openDashboard">可视化大屏</button>
<!-- 在methods中定义打开新窗口的方法 -->
methods: {
openDashboard() {
// 打开新窗口
const newWindow = window.open('', '_blank')
// 在新窗口中加载指定路由对应的组件
newWindow.location.href = `/dashboard`
}
}
```
需要注意的是,由于在新窗口中加载组件需要重新加载Vue实例,因此在组件中无法直接获取到原窗口中的数据和状态。如果需要在新窗口中展示特定的数据,可以通过URL参数或者其他方法传递需要的数据。
系统后台要求点击【可视化大屏】按钮,需要打开新窗口并调用已写好的的页面组件,但不能影响原窗口显示系统页面,,没有具体详细的步骤
以下是一种可能的实现方式:
1. 在前端页面中添加一个按钮,绑定点击事件;
2. 在点击事件中,使用 window.open() 方法打开一个新的窗口;
3. 在新的窗口中,使用 iframe 元素加载已写好的页面组件;
4. 在 iframe 元素中,设置 width 和 height 属性,使页面组件能够正确显示;
5. 在页面组件中,使用相应的数据源获取需要展示的内容,并进行渲染。
具体实现可能需要根据具体的技术栈和组件库进行调整。