Javascript 基于浏览器大小渲染条件vue组件

我正在寻找在vue js（nuxt）中使用响应组件的方法

我创建了此mixin，但出现错误：

export const mediaQuery = {
  data() {
    return {
      breakpoints: {
        sm: 576,
        md: 768,
        lg: 992,
        xl: 1200
      },
      windowWidth: 0,
      currentBreakpoint: ''
    }
  },
  created() {
    if (process.browser) {
      this.setWindowWidth()
      this.setCurrentBreakpoint()

      window.addEventListener('resize', () => {
        this.setWindowWidth()
        this.setCurrentBreakpoint()
      })
    }
  },
  computed: {
    smPlus() {
      return this.windowWidth >= this.breakpoints.sm
    },
    smMinus() {
      return this.windowWidth < this.breakpoints.md
    },
    mdPlus() {
      return this.windowWidth >= this.breakpoints.md
    },
    mdMinus() {
      return this.windowWidth < this.breakpoints.lg
    },
    lgPlus() {
      return this.windowWidth >= this.breakpoints.lg
    },
    lgMinus() {
      return this.windowWidth < this.breakpoints.xl
    },
    xlPlus() {
      return this.windowWidth >= this.breakpoints.xl
    }
  },
  methods: {
    setWindowWidth() {
      this.windowWidth = window.innerWidth
    },
    setCurrentBreakpoint() {
      if (this.windowWidth < this.breakpoints.sm) {
        this.currentBreakpoint = 'xs'
      } else if (
        this.windowWidth >= this.breakpoints.sm &&
        this.windowWidth < this.breakpoints.md
      ) {
        this.currentBreakpoint = 'sm'
      } else if (
        this.windowWidth >= this.breakpoints.md &&
        this.windowWidth < this.breakpoints.lg
      ) {
        this.currentBreakpoint = 'md'
      } else if (
        this.windowWidth >= this.breakpoints.lg &&
        this.windowWidth < this.breakpoints.xl
      ) {
        this.currentBreakpoint = 'lg'
      } else if (this.windowWidth >= this.breakpoints.xl) {
        this.currentBreakpoint = 'xl'
      }
    }
  }
}

export const mediaQuery={
数据（）{
返回{
断点：{
sm:576，
md:768，
lg:992，
xl:1200
},
窗宽：0，
当前断点：“”
}
},
创建（）{
if（process.browser）{
这是setWindowWidth（）
此.setCurrentBreakpoint（）为
window.addEventListener（'resize'，（）=>{
这是setWindowWidth（）
此.setCurrentBreakpoint（）为
})
}
},
计算：{
smPlus（）{
返回this.windowWidth>=this.breakpoints.sm
},
SM负（）{
返回this.windowWidth=this.breakpoints.md
},
md减去（）{
返回this.windowWidth=this.breakpoints.lg
},
lg减去（）{
返回this.windowWidth=this.breakpoints.xl
}
},
方法：{
setWindowWidth（）{
this.windowWidth=window.innerWidth
},
setCurrentBreakpoint（）{
if（this.windowWidth=this.breakpoints.sm&&
this.windowWidth=this.breakpoints.md&&
this.windowWidth=this.breakpoints.lg&&
this.windowWidth=this.breakpoints.xl）{
this.currentBreakpoint='xl'
}
}
}
}

这是一个错误： 未能在“节点”上执行“insertBefore”：参数1不是“节点”类型。

我不知道解决办法是什么

我们应该如何使用响应组件

我不想在这种情况下使用媒体查询

---

谢谢

我想说的问题是，您的SSR结果与客户结果不匹配。使用挂载的钩子设置断点，而不是创建断点

我认为问题不在您发布的代码中。更多信息请参见模板代码。这是真正接触dom（触发错误）的代码。顺便说一句，当您绑定到窗口调整事件时，组件内部的函数（调用它）。当组件损坏时，应将其移除。否则，可能会出现错误，因为

此

函数不再存在