首先需要三个页面 ,index.vue是默认进入的页面, indexhome.vue是pc端首页,mobile.vue是移动端首页 思路是添加判断是否是移动端方法,通过组件的方式展示不同组件
router.js里写入页面路由
在index.vue文件里引入pc端首页和移动端首页并添加判断方法
<template>
<div>
<component v-bind:is="currentTabComponent"></component>
</div>
</template>
<script>
import indexhome from "./indexhome.vue";
import mobilehome from "./mobilehome.vue";
export default {
components: {
indexhome,
mobilehome,
},
data() {
return {
};
},
methods: {
// // 添加判断方法
isMobile() {
this.flag = navigator.userAgent.match( /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
if (this.flag === null) {
return false;
// console.log("pc端");
} else {
// console.log("移动端");
return true;
}
},
},
computed: {
currentTabComponent() {
if (this.isMobile()) {
return "mobilehome";
} else {
return "indexhome";
}
},
},
};
</script>