两个浏览器窗口进行联动

两个浏览器窗口进行联动，可以使用Vue Router和Vuex来实现。具体步骤如下：

1.首先安装Vue Router和Vuex：

npm install --save vue-router vuex

2.在Vue项目中创建一个store.js文件，用于存储全局状态：

import Vue from 'vue' 
import Vuex from 'vuex' 
Vue.use(Vuex) 
export default new Vuex.Store({ 
    state: {
        windowWidth: window.innerWidth,
        windowHeight: window.innerHeight
        },
    mutations: { 
        setWindowWidth(state, width) { 
            state.windowWidth = width 
        }, 
        setWindowHeight(state, height) {
            state.windowHeight = height 
        } 
     },
     actions: {
         updateWindowWidth({ commit }) {
             commit('setWindowWidth', window.innerWidth)
        }, 
        updateWindowHeight({ commit }) { 
            commit('setWindowHeight', window.innerHeight) 
        }
     } 
})

3.在Vue项目中创建一个router.js文件，用于配置路由：

<template>
  <div :style="{ height: windowHeight + 'px' }">
    <h1>Home</h1>
    <p>Window width: {{ windowWidth }}</p>
    <p>Window height: {{ windowHeight }}</p>
  </div>
</template>

<script>
export default {
  name: 'Home',
  computed: {
    windowWidth() {
      return this.$store.state.windowWidth
    },
    windowHeight() {
      return this.$store.state.windowHeight
    }
  }
}
</script>

4.在Vue项目中的App.vue文件中添加以下代码，用于监听窗口变化并更新全局状态：

export default {
  name: 'App',
  created() {
    window.addEventListener('resize', this.handleResize)
  },
  destroyed() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      this.$store.dispatch('updateWindowWidth')
      this.$store.dispatch('updateWindowHeight')
    }
  }
}

5.在Vue项目中的Home.vue和About.vue组件中使用计算属性来获取全局状态，并根据状态来更新组件中的样式：

<template>
  <div :style="{ height: windowHeight + 'px' }">
    <h1>Home</h1>
    <p>Window width: {{ windowWidth }}</p>
    <p>Window height: {{ windowHeight }}</p>
  </div>
</template>

<script>
export default {
  name: 'Home',
  computed: {
    windowWidth() {
      return this.$store.state.windowWidth
    },
    windowHeight() {
      return this.$store.state.windowHeight
    }
  }
}
</script>

<template>
  <div :style="{ height: windowHeight + 'px' }">
    <h1>About</h1>
    <p>Window width: {{ windowWidth }}</p>
    <p>Window height: {{ windowHeight }}</p>
  </div>
</template>

<script>
export default {
  name: 'About',
  computed: {
    windowWidth() {
      return this.$store.state.windowWidth
    },
    windowHeight() {
      return this.$store.state.windowHeight
    }
  }
}
</script>

接着测试