Flutter Web首次加载URL哈希段被清除，如何实现直接跳转指定页面？

首次新窗口加载时URL被重置为根路径，通常是以下原因导致：

• 哈希URL策略初始化时机错误：如果HashUrlStrategy的设置晚于runApp调用，Flutter启动时无法正确读取初始哈希路径，会默认跳转到根路由。
• 路由配置未正确处理初始路径：MaterialApp的路由配置没有正确捕获并响应初始的哈希路径，导致自动 fallback 到根路由。
• 自定义路由逻辑干扰：项目中存在的路由拦截、重定向逻辑，在首次加载时错误地将路径重置为根路径。

1. 确保哈希策略在runApp前初始化 #

在main函数中，先调用setUrlStrategy再启动应用，保证Flutter启动时就能识别哈希路径：

import 'package:flutter_web_plugins/flutter_web_plugins.dart';
import 'package:flutter/material.dart';

void main() {
  // 优先设置哈希URL策略
  setUrlStrategy(HashUrlStrategy());
  runApp(const MyApp());
}

2. 正确配置路由并捕获初始路径 #

在MaterialApp中明确路由映射，同时确保初始路由能正确读取浏览器的默认路径：

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // 使用浏览器默认路由作为初始路由，而非硬编码的'/'
      initialRoute: WidgetsBinding.instance.platformDispatcher.defaultRouteName,
      routes: {
        '/': (context) => const HomePage(),
        '/login': (context) => const LoginPage(),
      },
      // 可选：这里也可以直接指定URL策略，和main中设置二选一即可
      urlStrategy: HashUrlStrategy(),
    );
  }
}

3. 排查自定义路由逻辑 #

检查项目中是否存在onGenerateRoute、NavigatorObserver或其他路由拦截代码，确保没有在首次加载时强制重定向到根路径。例如，如果有如下代码，需调整逻辑避免无差别重定向：

// 错误示例：强制重定向到根路径
Route<dynamic>? onGenerateRoute(RouteSettings settings) {
  return MaterialPageRoute(builder: (context) => const HomePage());
}

// 正确示例：根据路径匹配路由
Route<dynamic>? onGenerateRoute(RouteSettings settings) {
  switch (settings.name) {
    case '/login':
      return MaterialPageRoute(builder: (context) => const LoginPage());
    default:
      return MaterialPageRoute(builder: (context) => const HomePage());
  }
}

4. 手动解析哈希路径兼容特殊场景 #

如果遇到浏览器解析哈希路径异常的情况，可手动解析初始路径：

void main() {
  setUrlStrategy(HashUrlStrategy());
  // 手动解析初始哈希路径
  final uri = Uri.base;
  final initialRoute = uri.fragment.isEmpty ? '/' : '/${uri.fragment}';
  runApp(MyApp(initialRoute: initialRoute));
}

// 在MaterialApp中使用手动解析的初始路由
MaterialApp(
  initialRoute: initialRoute,
  routes: {
    '/': (context) => const HomePage(),
    '/login': (context) => const LoginPage(),
  },
)

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