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`的组件，用于显示手机打开的提示页面

 
<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`路由，显示手机打开的提示页面。如果用户在电脑上打开应用，则正常显示其他路由。