需求背景：由于公司业务主要在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.jsimport 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`路由，显示手机打开的提示页面。如果用户在电脑上打开应用，则正常显示其他路由。