Vue.js 2.1.10：非移动端访问时跳转至桌面站点的优化方案

针对你的Vue 2.1.10 + vue-router 2.2.0的场景，我整理了几个从快到慢的实现方案，既能满足“最小化页面加载甚至阻止加载立即跳转”的需求，也能适配不同的业务场景：

这个方法是最快的——它会在所有Vue、路由相关的资源加载之前就执行判断，直接跳转，完全不会加载任何Vue代码，把页面加载时间降到最低。

你只需要在项目根目录的index.html的<head>标签里添加一段内联脚本，放在所有Vue资源引用之前：

<head>
  <!-- 先放这个跳转脚本 -->
  <script>
    // 自定义设备检测逻辑：结合User Agent和屏幕宽度，你可以调整阈值
    function isMobileDevice() {
      // 通过User Agent识别常见移动设备
      const userAgentMatch = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
      // 结合屏幕宽度判断（这里以768px为界，你可以根据需求修改）
      const screenWidthMatch = window.innerWidth < 768;
      return userAgentMatch || screenWidthMatch;
    }

    // 非移动设备则立即跳转到桌面站
    if (!isMobileDevice()) {
      // 替换成你的桌面站URL
      window.location.href = 'https://your-desktop-site.com';
    }
  </script>

  <!-- 再放Vue、路由等资源的引用 -->
  <script src="/path/to/vue.js"></script>
  <script src="/path/to/vue-router.js"></script>
  <!-- 其他资源... -->
</head>

如果你的站点有部分路由允许桌面设备访问（比如某个特定页面），可以用vue-router的全局前置守卫来实现，这个方法会在路由跳转前执行判断，比组件渲染要早，但会加载Vue和路由的基础资源。

在你的main.js里这样配置：

// 先定义设备检测函数
function isMobileDevice() {
  const userAgentMatch = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
  const screenWidthMatch = window.innerWidth < 768;
  return userAgentMatch || screenWidthMatch;
}

// 创建路由实例
const router = new VueRouter({
  routes: [
    // 你的路由配置列表
    { path: '/', component: Home },
    { path: '/about', component: About },
    // 比如这个路由允许桌面访问
    { path: '/desktop-exception', component: DesktopException }
  ]
});

// 添加全局前置守卫
router.beforeEach((to, from, next) => {
  // 定义不需要跳转的例外路由
  const excludedRoutes = ['/desktop-exception'];
  
  // 非移动设备且不在例外路由列表里，就跳转
  if (!isMobileDevice() && !excludedRoutes.includes(to.path)) {
    window.location.href = 'https://your-desktop-site.com';
    // 不需要调用next()，因为已经触发了页面跳转
    return;
  }
  // 符合条件则正常进入路由
  next();
});

// 初始化Vue实例
new Vue({
  el: '#app',
  router,
  render: h => h(App)
});

• 避免无限循环：确保你的桌面站不会执行同样的重定向脚本，比如可以给桌面站的HTML加个判断，或者使用不同的域名/子域名来区分移动站和桌面站。
• 设备检测准确性：User Agent可以被修改，结合屏幕宽度判断能提升检测的可靠性，你可以根据自己的适配需求调整宽度阈值。
• 测试场景覆盖：记得在不同设备（手机、平板、桌面浏览器）和浏览器（Chrome、Safari等）上测试，确保检测逻辑符合预期。

内容的提问来源于stack exchange，提问作者Kacper Cieluch