Flutter Web URL中为何存在井号？能否移除？

为什么会出现井号？ #

Flutter Web默认采用哈希路由，URL里的#是这种路由模式的标志性特征，核心原因有两个：

1. 前端路由隔离：#后面的内容不会被发送到服务器，浏览器只会把#之前的路径发给服务器请求资源。这样即使你访问/home这类前端定义的子路由，服务器也只会返回根目录的index.html，避免出现404错误——毕竟服务器本身不知道Flutter定义的前端路由规则。
2. 兼容性兜底：早期部分浏览器对HTML5的History API支持不完善，哈希路由是一种能兼容更多旧浏览器的前端路由实现方案。

能不能移除井号？ #

当然可以，只需要切换到HTML5 History模式，但需要完成以下三步配置：

1. 配置Web入口文件 #

打开项目的web/index.html，确保存在<base href="/">标签（如果没有就添加到<head>标签内），这能让Flutter正确解析路由路径。

2. 修改Flutter路由配置 #

• 如果你用的是原生MaterialApp：
  设置useInRouterNeglect: true，同时确保路由配置正确：

  MaterialApp(
    useInRouterNeglect: true,
    initialRoute: '/home',
    routes: {
      '/home': (context) => const HomePage(),
    },
  );
  

• 如果你用的是GoRouter（推荐的现代路由库）：
  开启routerNeglect: true并配置路由：

  final router = GoRouter(
    initialLocation: '/home',
    routerNeglect: true,
    routes: [
      GoRoute(
        path: '/home',
        builder: (context, state) => const HomePage(),
      ),
    ],
  );
  

3. 服务器端关键配置 #

切换到History模式后，当用户直接在浏览器地址栏输入子路由（比如http://yourdomain/home），服务器会默认去找对应的物理文件，而这些文件并不存在，所以必须配置服务器把所有请求重定向到index.html：

• Nginx：在站点配置中添加：

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

• Apache：在项目根目录创建.htaccess文件，写入：

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
  

• Firebase Hosting：修改firebase.json的hosting部分：

  "hosting": {
    "public": "build/web",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
  

注意：如果你的服务器没有配置这一步，直接访问子路由会出现404错误，这是切换History模式最容易踩的坑。

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