在 Vue 中，判断用户是通过手机还是 PC 访问网页，可以通过检查 navigator.userAgent 属性来实现。这个属性提供了关于浏览器的信息，我们可以从中分析出用户代理字符串，从而判断设备类型。以下是一个简单的示例，说明如何在 Vue 中实现这一逻辑：

你可以在项目的入口文件（如 main.js）中添加一个全局的方法，或者在某个组件内直接使用这个逻辑。

全局方法 (在 main.js 中)

// main.js
import Vue from 'vue';

Vue.prototype.isMobile = function() {
  const userAgentInfo = navigator.userAgent;
  const mobileAgents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod'];
  for (let i = 0; i < mobileAgents.length; i++) {
    if (userAgentInfo.indexOf(mobileAgents[i]) > 0) {
      return true; // 是移动设备
    }
  }
  return false; // 是PC设备
};

然后在任意组件中，你可以这样使用：

<!-- 在Vue组件中 -->
<template>
  <div v-if="isMobile">您正在使用手机访问</div>
  <div v-else>您正在使用PC访问</div>
</template>

<script>
export default {
  methods: {
    // 这里可以直接使用 this.isMobile，因为我们已经在全局混入了该方法
  }
}
</script>

组件内直接判断

如果你不希望将其设置为全局方法，也可以直接在组件内部进行判断：

<template>
  <div>
    <div v-if="checkIsMobile()">您正在使用手机访问</div>
    <div v-else>您正在使用PC访问</div>
  </div>
</template>

<script>
export default {
  methods: {
    checkIsMobile() {
      const userAgentInfo = navigator.userAgent;
      const mobileAgents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod'];
      for (let i = 0; i < mobileAgents.length; i++) {
        if (userAgentInfo.indexOf(mobileAgents[i]) > 0) {
          return true;
        }
      }
      return false;
    }
  }
}
</script>

这两种方式都可以有效地帮助你在 Vue 应用中根据用户设备类型展示不同的内容。