Flutter Web使用GetX路由时如何手动改URL不重启应用实现跳转？

问题根因 #

默认Flutter Web使用Hash路由模式，且未配置服务端重定向规则时，修改URL路径会触发浏览器向服务端发起新请求，导致应用整体重载。

配置步骤 #

• 步骤1：启用PathUrlStrategy
  在main函数初始化时，针对Web平台替换默认的Hash路由策略为Path策略，移除URL中的#前缀，同时开启浏览器路由历史同步：

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

void main() {
  if (kIsWeb) {
    setUrlStrategy(PathUrlStrategy());
  }
  runApp(const MyApp());
}

• 步骤2：配置GetX命名路由
  根组件使用GetMaterialApp，完整注册所有需要支持直接URL访问的路由：

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

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      // 配置应用初始路由
      initialRoute: '/',
      // 路由表：所有允许直接URL访问的页面必须在此注册
      getPages: [
        GetPage(name: '/', page: () => const IndexPage()),
        GetPage(name: '/home', page: () => const HomePage()),
        GetPage(name: '/detail/:id', page: () => const DetailPage()),
        // 404兜底页面
        GetPage(name: '/404', page: () => const NotFoundPage()),
      ],
      // 未知路由跳转兜底
      unknownRoute: GetPage(name: '/404', page: () => const NotFoundPage()),
    );
  }
}

• 步骤3：配置服务端重定向规则
  使用Path路由策略后，服务端会默认将子路径识别为静态资源请求，需要配置规则将所有路径的请求全部重定向到应用根目录的index.html，由Flutter侧接管路由匹配。

Nginx服务端配置示例：

server {
  listen 80;
  server_name www.myApp.com;
  root /web/dist;

  location / {
    try_files $uri $uri/ /index.html;
  }
}

效果验证 #

全部配置完成后即可实现预期效果：

• 调用Get.toNamed('/home')跳转时，浏览器URL会自动同步更新，页面无刷新
• 直接修改浏览器URL为对应路由地址回车，应用不会重启，直接渲染对应路由页面

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