web前端在手机端打开进行页面提示——手机端适配问题

需求背景：由于公司业务主要在PC端进行操作，部分ipad平板用户（做数据查看），手机端不是我们的核心用户场景。手机有专门的app。产品提出了当页面在手机端打开时，手机端进行提示，请前往网页端进行操作。

 要在Vue web应用中检测屏幕是否是手机打开，并对所有路由进行提示，可以使用Vue Router的导航守卫来实现。以下是一种通用的设计方案：

 beforeEach全局路由导航守卫

1. 创建一个全局的路由导航守卫，用于检测屏幕是否是手机打开。

// main.js
 

import Vue from 'vue';

import App from './App.vue';

import router from './router';


router.beforeEach((to, from, next) => {

  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

  if (isMobile) {

    // 如果是手机打开，跳转到提示页面

    next('/mobile-warning');

  } else {

    next();

  }

});


new Vue({

  router,

  render: h => h(App),

}).$mount('#app');

提示页面MobileWarning.vue

创建一个名为`MobileWarning`的组件，用于显示手机打开的提示页面

<template>
  <div>
    <h1>请在电脑端打开该应用</h1>
    <p>该应用只能在电脑端访问，请使用电脑浏览器打开。</p>
  </div>
</template>

<script>
export default {
  name: 'MobileWarning',
};
</script>

<style scoped>
/* 样式 */
</style>
```

配置跳转路由/mobile-warning

 在路由配置中添加一个名为`mobile-warning`的路由，指向`MobileWarning`组件

// router.js

import Vue from 'vue';
import Router from 'vue-router';
import MobileWarning from './components/MobileWarning.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/mobile-warning',
      name: 'MobileWarning',
      component: MobileWarning,
    },
    // 其他路由配置
  ],
});

这样，当用户在手机上打开应用时，会自动跳转到`/mobile-warning`路由，显示手机打开的提示页面。如果用户在电脑上打开应用，则正常显示其他路由。