Angular路由实现设备专属重定向遇阻：多种方案均失效

可行实现方案：使用函数式CanActivateFn守卫结合路由跳转 #

直接在守卫中完成设备检测与动态跳转，避开redirectTo的静态限制，代码如下：

1. 编写设备重定向守卫

import { CanActivateFn, Router } from '@angular/router';
import { inject } from '@angular/core';
import { ToolService } from './path-to/tool.service';

export const deviceRedirectGuard: CanActivateFn = (route, state) => {
  const toolService = inject(ToolService);
  const router = inject(Router);

  // 根据设备类型跳转对应路由
  const targetRoute = toolService.isDesktopOrTablet() ? '/desktop-home' : '/mobile-home';
  router.navigate([targetRoute]);
  
  // 返回false阻止原路由激活
  return false;
};

2. 在路由配置中绑定守卫
   给需要触发重定向的入口路由（比如根路径''）配置该守卫，同时设置一个空组件避免路由报错：

import { Routes } from '@angular/router';
import { deviceRedirectGuard } from './guards/device-redirect.guard';
import { EmptyComponent } from './components/empty/empty.component';
import { DesktopHomeComponent } from './components/desktop-home/desktop-home.component';
import { MobileHomeComponent } from './components/mobile-home/mobile-home.component';

export const routes: Routes = [
  {
    path: '',
    canActivate: [deviceRedirectGuard],
    component: EmptyComponent
  },
  { path: 'desktop-home', component: DesktopHomeComponent },
  { path: 'mobile-home', component: MobileHomeComponent },
  // 其他业务路由...
];

3. 创建空组件（可选但必要）
   如果路由没有绑定组件会抛出错误，所以需要一个空组件占位：

import { Component } from '@angular/core';

@Component({
  selector: 'app-empty',
  template: ''
})
export class EmptyComponent {}

为什么之前的方法不生效？ #

• 废弃类守卫：Angular已废弃类式守卫，官方推荐函数式守卫，继续使用会有兼容性风险；
• redirectTo与函数守卫冲突：redirectTo是静态路由配置，会在守卫执行前被解析，无法结合动态判断结果；
• 解析器（Resolver）用错场景：Resolver的核心作用是预加载路由数据，不会主动触发路由跳转，因此无法实现重定向逻辑。

内容的提问来源于stack exchange，提问作者Vishnuprasanth S ECE