为移动浏览器显示不同的 Vuejs 组件

Question

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

Main.vue, ProductList.vue, ProductDetail.vue,

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

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

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

谢谢，

原文由 sean717 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我有一个想法，使用一个 mixin 来检测浏览器是在移动设备还是桌面设备上打开的（这个 答案 中的 js 代码示例）。然后使用 v-if，例如：

 <production-list v-if="!isMobile()"></production-list>
<production-list-mobile v-else></production-list-mobile>

所以这里是 https://jsfiddle.net/Ldku0xec/ 上的一个例子

原文由 Mohd_PH 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我有 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
   }
 }
}

原文由 Zhanserik 发布，翻译遵循 CC BY-SA 4.0 许可协议