Flutter Web - Go Router Navigation 根据底部选项卡选择更改 Web URL答案

【问题标题】：Flutter Web - Go Router Navigation Change Web URL based on bottom tab selectionFlutter Web - Go Router Navigation 根据底部选项卡选择更改 Web URL
【发布时间】：2022-11-04 12:32:19
【问题描述】：

我试图在我的主屏幕上为我的颤振网站项目实现一个带有 3 个选项卡的底部选项卡导航。目前我正在使用 go_router 包进行颤振网络路由。

以下是我的网络应用程序导航代码，我想要实现的是特定底部选项卡 1 点按的 ontap。我想将 url 更改为 <Web_URL>/#Tab1 之类的内容。

但是，我找不到任何有用的东西。有人可以帮忙吗？

static final List<GoRoute> _appRoutes = [
    GoRoute(
        path: AppRouter.pathLogin,
        builder: (BuildContext context, GoRouterState state) =>
            const LoginScreen()),
    GoRoute(
      path: AppRouter.pathHome,
      builder: (BuildContext context, GoRouterState state) =>
          const HomeScreen(),
      routes: [
        GoRoute(
            path: AppRouter.pathCreateContact,
            builder: (BuildContext context, GoRouterState state) =>
                const CreateContactScreen()),
      ],
    ),
  ];

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
        title: 'Follow-Up',
        debugShowCheckedModeBanner: false,
        routeInformationParser: _router.routeInformationParser,
        routeInformationProvider: _router.routeInformationProvider,
        routerDelegate: _router.routerDelegate);
  }

  final GoRouter _router = GoRouter(
      routes: _appRoutes,
      urlPathStrategy: UrlPathStrategy.path,
      initialLocation: FirebaseAuth.instance.currentUser != null
          ? AppRouter.pathHome
          : AppRouter.pathLogin);

【问题讨论】：

您是说要在导航到该页面后打开 Web 视图吗？
@LeXeR 这个项目在颤振网络中。所以目前，当我打开我的项目时，Web URL 就像localhost:8000 所以，我想要实现的是点击我的底部选项卡设置。我想要网址，localhost:8000/#settings-tab
就像这样，使用路由器导航到一个类，在你的情况下是它的主页/登录等。你需要使用 web 视图创建类似的类。在该 web 视图中，您加载此 url。因为路由器不知道有关 url 的任何信息。它只知道类。
@LeXeR 让我知道我们是否可以配置需求颤动方式。

标签： flutter flutter-web flutter-navigation flutter-go-router

【解决方案1】：

您可以使用壳牌路线。请看下面的例子，它正是你可能需要的。 https://github.com/flutter/packages/blob/main/packages/go_router/example/lib/shell_route.dart

【讨论】：