即使使用 #/page 加载 URL，Flutter Web 也会首先加载初始页面

Posted 2023-02-23

【中文标题】即使使用 #/page 加载 URL，Flutter Web 也会首先加载初始页面

【英文标题】：Flutter Web loads the initial page first even when loading URL with #/page

【发布时间】：2020-10-29 04:18:52

【问题描述】：

我正在尝试https://flutter.dev/docs/cookbook/navigation/named-routes 此处提供的标准导航应用程序。即使我将浏览器打开到 http://localhost:8080/#/second，它也会构建第 1 页，然后用第 2 页替换它，甚至向用户显示一个后退按钮。我真的很想将用户直接带到第二页而不“通过”。请问有什么想法吗？

这里又是代码，添加了一些打印内容

import 'package:flutter/material.dart';

void main() 
  runApp(MaterialApp(
    title: 'Named Routes Demo',
    routes: 
      '/': (context) => FirstScreen(),
      '/second': (context) => SecondScreen(),
    ,
  ));


class FirstScreen extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    print ("Screen 1 building");
    return Scaffold(
      appBar: AppBar(
        title: Text('First Screen'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Launch second screen'),
          onPressed: () 
            // Navigate to the second screen using a named route.
            Navigator.pushNamed(context, '/second');
          ,
        ),
      ),
    );
  


class SecondScreen extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    print ("Screen 2 building");
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Screen"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () 
            Navigator.pop(context);
          ,
          child: Text('This is screen 2, go to 1!'),
        ),
      ),
    );
  

【参考方案1】：

您可以在<FlutterProject>/web/index.html第14行<base href="/">中设置默认路由路径。

默认设置为“/”

【参考方案2】：

我认为您应该将第二个屏幕转换为 StatefulWidget 以添加 didChangeDependencies 或 initState 并添加您的 Navigator.pop(context) 以自动转到 FirstScreen

【讨论】：

谢谢，不过我的目标是通过打开 http://localhost:8080/#/second 来确保应用程序启动时，Flutter 会直接构建第二个页面，而无需在毫秒之前构建第一页。