pc后台自适应移动手机转到h5（正则表达式，检查当前访问设备是不是移动端。）

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

window.navigator.userAgent,

);

1. 结尾的 i → 表示 忽略大小写。

window.navigator.userAgent userAgent 是浏览器提供的字符串 里面包含 "这是什么设备/系统/浏览器" 浏览器的用户代理信息

2. .test(userAgent) test 会判断：userAgent 字符串中是否包含正则里的关键字

navigator 是什么？

在浏览器中，window.navigator 是一个内置对象，它包含：

• 浏览器名称

• 浏览器版本

• 系统信息（iOS、Android、Windows...）

• 是否是移动端

• 是否支持某些功能（如定位、震动、剪贴板权限等）

可以理解成：

你想知道浏览器是谁，它都能告诉你。

（1）routes/basic.ts --- 在系统首页 Dashboard 路由做移动端跳转

✔ 你在 SYSTEM_ROUTE 里这样写：

项目访问 /dashboard 时

→ 如果是 移动端 ：自动 redirect 重定向 到 /List（你的 H5 列表页）

→ 如果是 PC 端 ：正常进入 /dashboard/statisticalAnalysis

const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
  window.navigator.userAgent,
);
const dashboard = isMobile ? '/List' : '/dashboard/statisticalAnalysis';

export const SYSTEM_ROUTE: AppRouteRecordRaw = {
  path: '/dashboard',
  name: 'Dashboard',
  component: LAYOUT,
  redirect: dashboard,
  meta: {
    orderNo: 10,
    icon: 'ion:grid-outline',
    title: t('首页'),
  },
};

2routes/basic.ts --- 登录页动态选择 H5 或 PC 登录组件

const isMobile = ...;

const loginComponent = isMobile
  ? () => import('/@/views/sys/login/H5Login.vue')
  : () => import('/@/views/sys/login/Login.vue');

export const LoginRoute = {
  path: '/login',
  name: 'Login',
  component: loginComponent,
  meta: {
    title: t('登录页'),
  },
};

• 手机端 → 使用 H5 登录页：H5Login.vue

• PC 端 → 使用 PC 登录页：Login.vue

3permissionGuard.ts --- 在路由守卫 beforeEach 中直接放行移动端

• 只要是移动端

  → 不拦截，不校验 token，不重定向，直接放行所有路由

• 这是你为了 H5 页面能自己控制跳转而加的逻辑。

  const isMobile = ...;

  router.beforeEach(async (to, from, next) => {
    // 如果是移动设备，直接放行
    if (isMobile) {
      next();
      return;
    }
    ...
  });

4）basicRoutes 注册了 H5 List 页面

• /List 就是你写的 H5 列表页

• 设为 ignoreAuth: true → 不需要 token 也可以访问

• 因为移动端被你允许"router.beforeEach 直接放行"，所以能自由进入

  export const LoginListRoute = {
    path: '/List',
    name: 'List',
    component: () => import('/@/views/sys/loginList/loginList.vue'),
    meta: {
      title: t('履职列表'),
      ignoreAuth: true,
    },
  };

二、总结：全项目移动端跳转逻辑

文件	位置	你写的逻辑	作用
routes/basic.ts	SYSTEM_ROUTE	PC → dashboard，Mobile → /List	首页根据设备类型跳转
routes/basic.ts	LoginRoute	Mobile → H5Login.vue	登录页按端区分
routes/basic.ts	LoginListRoute	注册 /List 路由	H5 列表页入口
permissionGuard.ts	beforeEach	isMobile 直接 next()	移动端不走权限验证