子路由上的页面重新加载不起作用

Question

我正在使用飞镖。我有一个包含不同组件的项目，总的来说，路由工作正常，但是，当我尝试按“ f5”重新加载时，仅在子组件中收到白页，在其他组件中，重新加载正常。控制台不会引发错误，您能帮我吗？

我遵循路由器教程https://angulardart.dev/guide/router/4

我尝试路由相同的组件，例如子组件和独立组件，只有在独立组件时，它才能正确地重新加载。

routes.dart文件

import 'package:acoustic_inteligence_app/src/app/content/content_component.template.dart'
    as content_component;
import 'package:acoustic_inteligence_app/src/app/content/not_found_component/not_found_component.template.dart'
    as not_found_component;
import 'package:acoustic_inteligence_app/src/app/content/landing_component/landing_component.template.dart'
    as landing_component;
import 'package:acoustic_inteligence_app/src/app/content/start_component/start_component.template.dart'
    as start_component;
import 'package:acoustic_inteligence_app/src/app/content/team_component/team_component.template.dart'
    as team_component;
import 'package:acoustic_inteligence_app/src/app/content/transcription_component/editor_component/editor_component.template.dart'
    as editor_component;
import 'package:acoustic_inteligence_app/src/app/content/transcription_component/list_component/list_component.template.dart'
    as list_transcription_component;
import 'package:acoustic_inteligence_app/src/app/content/transcription_component/transcription_component.template.dart'
    as transcription_component;
import 'package:acoustic_inteligence_app/src/app/content/transcription_component/upload_component/upload_component.template.dart'
    as upload_component;
import 'package:acoustic_inteligence_app/src/app/login/login_component.template.dart'
    as login_component;
import 'package:acoustic_inteligence_app/src/app/register/register_component.template.dart'
    as register_component;
import 'package:angular_router/angular_router.dart';

import 'package:acoustic_inteligence_app/src/front/routes/route_paths.dart';
export 'package:acoustic_inteligence_app/src/front/routes/route_paths.dart';

class Routes {
    static final content = RouteDefinition(
    routePath: RoutePaths.content,
    component: content_component.ContentComponentNgFactory,
    );

    static final landing = RouteDefinition(
    routePath: RoutePaths.landing,
    component: landing_component.LandingComponentNgFactory,
    );

    static final not_found = RouteDefinition(
    routePath: RoutePaths.not_found,
    component: not_found_component.NotFoundComponentNgFactory,
    );

    static final login = RouteDefinition(
        routePath: RoutePaths.login,
        component: login_component.LoginComponentNgFactory,
        useAsDefault: true);

    static final register = RouteDefinition(
        routePath: RoutePaths.register,
        component: register_component.RegisterComponentNgFactory);

    static final list_transcription = RouteDefinition(
        routePath: RoutePaths.list_transcription,
        component:
        list_transcription_component.ListTranscriptionComponentNgFactory,
        useAsDefault: true);

    static final upload = RouteDefinition(
        routePath: RoutePaths.upload,
        component: upload_component.UploadComponentNgFactory);

    static final editor = RouteDefinition(
        routePath: RoutePaths.editor,
        component: editor_component.EditorComponentNgFactory);

    static final team = RouteDefinition(
        routePath: RoutePaths.team,
        component: team_component.TeamComponentNgFactory);

    static final transcription = RouteDefinition(
        routePath: RoutePaths.transcription,
        component: transcription_component.TranscriptionComponentNgFactory);

    static final start = RouteDefinition(
        routePath: RoutePaths.start,
        component: start_component.StartComponentNgFactory,
        useAsDefault: true);

    static final appRoute = <RouteDefinition>[
    content,
    login,
    register,
    landing,
    RouteDefinition.redirect(
        path: '',
        redirectTo: RoutePaths.login.toUrl(),
    ),
    RouteDefinition(
        path: '.+',
        component: not_found_component.NotFoundComponentNgFactory,
    ),
    ];

    static final contentRoute = <RouteDefinition>[team, transcription, start,
        RouteDefinition(
        path: '.+',
        component: not_found_component.NotFoundComponentNgFactory,
    ),];

    static final transcriptionRoute = <RouteDefinition>[
    editor,
    list_transcription,
    upload
    ];
}

route_paths.dart文件

import 'package:angular_router/angular_router.dart';

int getId(Map<String, String> parameters) {
    final id = parameters[paramId];
    return id == null ? null : int.tryParse(id);
}

const paramId = "id";

class RoutePaths {
    //main
    static final not_found = RoutePath(path: 'not_found');
    static final landing = RoutePath(path: 'landing');
    static final content = RoutePath(path: 'app');
    static final login = RoutePath(path: 'login', useAsDefault: true);
    static final register = RoutePath(path: 'register');
    static final team = RoutePath(path: 'team', parent: content);
    static final transcription =
        RoutePath(path: 'transcription', parent: content);
    static final start =
        RoutePath(path: 'inicio', parent: content, useAsDefault: true);

    //transcription
    static final list_transcription =
        RoutePath(path: 'listado', parent: transcription, useAsDefault: true);
    static final upload = RoutePath(path: 'upload/:${paramId}', parent: transcription);

    static final editor =
        RoutePath(path: 'editor/:${paramId}', parent: transcription);
}

Answer 1

这使用来自HTML5的推送路由。使用该解决方案，您必须映射服务器上的URL，以返回主index.html页以获取路由中可能使用的任何路径。

否则，您可以改为添加routerProvidersHash。哈希策略将在URL末尾使用＃/路径，并保持相同的起始路径。这不会发送到您的服务器，因此您无需重新映射这些路径。当您不控制服务器时，这很好，但不被认为是当前Web开发的最佳实践。