怎么实现vue的pc端和移动端一个链接

566 阅读1分钟

首先需要三个页面 ,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>