为移动浏览器显示不同的Vuejs组件
我正在使用Vue 2.0开发一个SPA。到目前为止，开发的组件都是针对“桌面”浏览器的，例如，我有
Main.vue，ProductList.vue，ProductDetail.vue，
我想要另一套用于移动浏览器的组件，如MainMobile.vue，ProductListMobile.vue，ProductDetailMobile.vue，
我的问题是，在移动浏览器中查看时，我应该在哪里以及如何让我的SPA呈现移动版本的组件？
请注意，我明确地希望避免使我的组件响应。我想保留它们的两个独立版本。
谢谢,
回答 12
Stack Overflow用户
发布于 2018-01-30 14:28:27
我有一个想法，使用一个混入来检测浏览器是在移动设备上打开还是在桌面上打开(以此答案中的js代码为例)。然后使用v-if，例如
<production-list v-if="!isMobile()"></production-list>
<production-list-mobile v-else></production-list-mobile>这里有一个关于https://jsfiddle.net/Ldku0xec/ 1的例子：https://vuejs.org/v2/guide/mixins.html 2：Detecting a mobile browser
Stack Overflow用户
发布于 2018-05-15 13:20:06
我有一个针对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
}
}
}Stack Overflow用户
发布于 2018-06-27 10:15:56
我也遇到了同样的问题，我用一个中立的、没有布局的vue文件(Init.vue)解决了这个问题，这个文件可以被移动设备和桌面访问，并且这个文件会重定向到正确的文件。
假设我有Main.vue和MainMobile.vue。我将添加一个将重定向的Init.vue。所以我的路由器/index.js是：
import Router from 'vue-router'
import Vue from 'vue'
import Main from '@/components/Main'
import MainMobile from '@/components/MainMobile'
import Init from '@/components/Init'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Root',
component: Init
},
{
path: '/Main',
name: 'Main',
component: Main
},
{
path: '/MainMobile',
name: 'MainMobile',
component: MainMobile
},
]
})在Init.vue文件中，将进行移动/桌面检测：
<template>
</template>
<script>
export default {
name: 'Init',
methods: {
isMobile() {
if( screen.width <= 760 ) {
return true;
}
else {
return false;
}
}
},
created() {
if (this.isMobile()) {
this.$router.push('/MainMobile');
}
else {
this.$router.push('/Main');
}
}
}
</script>
<style scoped>
</style>使用的isMobile()函数非常简单，您可以更改为任何其他函数。
https://stackoverflow.com/questions/48515023
复制相似问题
腾讯云开发者
