vue.js - 为移动浏览器显示不同的 Vuejs 组件

Question

我正在使用 Vue 2.0 开发 SPA。到目前为止开发的组件是针对“桌面”浏览器的，例如我有

主.vue, 产品列表.vue， ProductDetail.vue，

我想要另一组用于移动浏览器的组件，例如 MainMobile.vue, ProductListMobile.vue， ProductDetailMobile.vue，

我的问题是，在移动浏览器中查看时，我应该在哪里以及如何让我的 SPA 呈现组件的移动版本？

请注意，我明确希望避免让我的组件响应。我想保留它们的两个独立版本。

谢谢，

Answer 1

我有一个简单的 Vue.js 解决方案:

<div v-if="!isMobile()">
  <desktop>
  </desktop>
</div>
<div v-else>
  <mobile>
  </mobile>
</div>

和方法:

methods: {
 isMobile() {
   if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
     return true
   } else {
     return false
   }
 }
}