Nuxt.js 打开新窗口后如何隐藏指定组件？有哪些可行实现方案？

该需求可以实现，核心思路是给新开窗口的目标URL附加专属标识参数，页面渲染时根据参数判断是否隐藏指定组件，同时需要修正你原有代码中window.open的参数传参错误问题。

具体实现步骤 #

• 步骤1：修正window.open的调用逻辑，给目标URL拼接自定义查询参数，同时将窗口特性配置移到第三个参数位
• 步骤2：新增计算属性读取路由查询参数，判断当前页面是否为新开的隐藏组件窗口
• 步骤3：模板中通过v-if指令控制Acomponent、Bcomponent的渲染逻辑

完整修改后代码 #

<template>
    <div>
        <!-- 根据参数控制是否隐藏两个组件 -->
        <Acomponent v-if="!isHideComponent" />
        <Bcomponent v-if="!isHideComponent" />
        <div @click="openWindow()">hellow</div>
    </div>
</template>

<script>
export default {
    data() {
        return {}
    },
    computed: {
        // 读取路由参数判断是否需要隐藏组件
        isHideComponent() {
            return this.$route.query.hideComponent === '1'
        }
    },
    methods: {
        openWindow() {
            const width = '1000'
            const height = '600'

            const left = Math.ceil((window.screen.width - width) / 2)
            const top = Math.ceil((window.screen.height - height) / 2)
            // 拼接自定义参数到目标URL
            const targetUrl = new URL(location.href)
            targetUrl.searchParams.set('hideComponent', '1')
            // 修正window.open参数：第二个参数为窗口名，第三个参数为窗口特性
            window.open(targetUrl.toString(), '_blank', `width=${width}, height=${height}, left=${left}, top=${top}, resizable=yes, scrollbars=yes`)
        },
    },
}
</script>

拓展说明 #

如果不希望用户手动拼接URL参数触发隐藏逻辑，可以将标识存在sessionStorage中，新开窗口加载时读取存储值判断，用完即删即可，实现逻辑和URL参数方案一致。

内容的提问来源于stack exchange，提问作者SkoreanAsHol