Angular9中router.navigate旧浏览器跳转无效问题求助

我之前也碰到过类似的路由跳转没反应的情况，结合你的场景，咱们从这几个方向一步步排查：

1. 浏览器版本的类型匹配问题 #

ngx-device-detector返回的browserVersion大概率是字符串类型，直接和数字83比较会出现逻辑错误。比如字符串"100"和数字83比较时，JavaScript会把数字转成字符串，导致"100" < 83的结果是true（因为字符"1"比"8"小）；如果是"82.1"这类带小数点的版本号，直接对比也会出错。

解决方法：
把版本号转成整数后再比较，比如提取版本号的整数部分：

// 提取版本号的整数段
const browserVersionNum = parseInt(this.browserVersion.split('.')[0], 10);
if (this.browserName === 'Chrome' && browserVersionNum < 83) {
  this.router.navigate(['/pages/unsupported-browsers-component']);
}

2. 路由跳转的时机不对 #

如果你是在APP_INITIALIZER或者组件ngOnInit的早期阶段调用跳转，可能此时Angular的路由模块还没完全初始化完成，导致跳转指令被忽略。

解决方法：

• 把跳转逻辑放到ngAfterViewInit钩子中，确保视图和路由都初始化完毕；
• 或者用setTimeout延迟执行跳转（虽然有点hack，但能快速验证是不是时机问题）：

ngOnInit() {
  const browserVersionNum = parseInt(this.browserVersion.split('.')[0], 10);
  if (this.browserName === 'Chrome' && browserVersionNum < 83) {
    setTimeout(() => {
      this.router.navigate(['/pages/unsupported-browsers-component']);
    }, 0);
  }
}

3. 路由路径配置或拼写问题 #

检查你的路由配置和跳转路径是否完全匹配：

• 确认路由配置中的path是不是'pages/unsupported-browsers-component'，跳转用的绝对路径['/pages/unsupported-browsers-component']是否和配置一致；如果pages是父路由，也可以尝试拆分路径为['/pages', 'unsupported-browsers-component']；
• 检查路径的拼写、大小写是否完全一致，比如有没有把组件名的大小写写错。

4. 路由守卫拦截了跳转 #

如果你的应用配置了全局路由守卫（比如CanActivate、CanLoad），可能守卫阻止了跳转到这个兼容提示页面。

解决方法：
在守卫逻辑中添加例外，允许跳转到目标路径，比如：

canActivate(route: ActivatedRouteSnapshot): boolean {
  if (route.routeConfig?.path === 'pages/unsupported-browsers-component') {
    return true;
  }
  // 其他守卫逻辑
}

5. ngx-device-detector的检测结果不准确 #

有时候ngx-device-detector会把基于Chromium的浏览器（比如Edge、Brave）识别成Chrome，或者版本号获取错误。可以先在控制台打印检测值，确认结果是否符合预期：

console.log('浏览器名称:', this.browserName);
console.log('浏览器版本:', this.browserVersion);

如果检测结果不对，也可以手动解析navigator.userAgent来获取更准确的信息：

const userAgent = navigator.userAgent;
const chromeMatch = userAgent.match(/Chrome\/(\d+)/);
// 排除Edge等基于Chromium的其他浏览器
if (chromeMatch && !userAgent.includes('Edg/')) {
  const version = parseInt(chromeMatch[1], 10);
  if (version < 83) {
    this.router.navigate(['/pages/unsupported-browsers-component']);
  }
}

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