vuejs2 - 您如何响应地切换不同显示尺寸的路线？

Question

是否有一种简单干净的方法来为不同的显示器提供不同的路线，当尺寸改变时更新路线？

标签： vuejs2routes

Answer 1

您只需要创建一个resize侦听器并指定所需的断点，然后根据当前断点（窗口宽度）推送所需的路由：

代码笔：

https://codepen.io/AlekseiHoffman/pen/NWPWZQx?editors=1010

mounted() {
  this.$nextTick(()=>{
    window.addEventListener('resize', this.windowResizeHandler)
  })
},
created() {
  this.windowResizeHandler(); // check size on load as well
},
beforeDestroy() {
  window.removeEventListener('resize', this.windowResizeHandler)
},
methods: {
  windowResizeHandler(event) {
    if (window.innerWidth > 650) {
      // change route here
      // this.$router.push('ROUTE_NAME').catch(err => {})         
    }
    else {
      // change route here
      // this.$router.push('ROUTE_NAME').catch(err => {})         
    }
  }
}