我的Ionic 5刷新无法正常工作，当我尝试刷新浏览器中的“域/家庭/仪表板”时，页面空白

编程问答 2022-08-15

问题描述

我已经构建了一个应用，该应用具有两种类型的路线

  1. 域/登录
  2. 域/家庭/仪表板

第一个域完美运行 第二个域也可以使用，但是当我刷新“ Domain / home / dashboard”之类的页面时，我的页面空白 下面给出的是屏幕截图

enter image description here

在登录index.module处理页面之前，例如登录，注册等 索引路由

import { NgModule } from "@angular/core";
import { Routes,RouterModule } from "@angular/router";

import { IndexPage } from "./index.page";
import { Indexguard } from "../guards/index.guard";

const routes: Routes = [
    {
        path: "",component: IndexPage,canActivate: [Indexguard],children: [
            {
                path: "",loadChildren: () => import("../pages/welcome/welcome.module").then((m) => m.WelcomePageModule)
            },{
                path: "login",loadChildren: () => import("../pages/login/login.module").then((m) => m.LoginPageModule)
            },{
                path: "signup",loadChildren: () => import("../pages/signup/signup.module").then((m) => m.SignupPageModule)
            } /*
            {
                path: "home",loadChildren: () => import("../home/home.module").then((m) => m.HomePageModule)
            }*/
        ]
    }
];

@NgModule({
    imports: [RouterModule.forChild(routes)],exports: [RouterModule]
})
export class IndexPageRoutingModule {}

Index.guard 

import { Injectable } from "@angular/core";
import { CanActivate,Router } from "@angular/router";
import { AuthConstants } from "../config/auth-constant";
import { StorageService } from "../services/storage.service";

@Injectable({
    providedIn: "root"
})
export class Indexguard implements CanActivate {
    constructor(public storageService: StorageService,public router: Router) {}
    canActivate(): Promise<boolean> {
        return new Promise((resolve) => {
            this.storageService
                .get(AuthConstants.AUTH)
                .then((res) => {
                    if (res) {
                        this.router.navigate(["home/poultry"]);
                        resolve(false);
                    } else resolve(true);
                })
                .catch((err) => {
                    resolve(true);
                });
        });
    }
}

登录home.module后处理诸如仪表板之类的页面。 路由

import { NgModule } from "@angular/core";
import { Routes,RouterModule } from "@angular/router";

import { HomePage } from "./home.page";
import { HomeGuard } from "../guards/home.guard";
import { UserDataResolver } from "../resolvers/userData.resolver";
const routes: Routes = [
    {
        path: "home",component: HomePage,canActivate: [HomeGuard],resolve: {
            userData: UserDataResolver
        },children: [
            {
                path: "Feed",loadChildren: () => import("../pages/Feed/Feed.module").then((m) => m.FeedPageModule)
            },{
                path: "notifications",loadChildren: () =>
                    import("../pages/notifications/notifications.module").then((m) => m.NotificationsPageModule)
            },{
                path: "messages",loadChildren: () => import("../pages/messages/messages.module").then((m) => m.MessagesPageModule)
            },{
                path: "webinar",loadChildren: () => import("../pages/webinar/webinar.module").then((m) => m.WebinarPageModule)
            },{
                path: "webinar-detail/:id",loadChildren: () =>
                    import("../pages/webinar-detail/webinar-detail.module").then((m) => m.WebinarDetailPageModule)
            },{
                path: "Feed-detail/:id",loadChildren: () =>
                    import("../pages/Feed-detail/Feed-detail.module").then((m) => m.FeedDetailPageModule)
            },{
                path: "dashboard",loadChildren: () => import("../pages/dashboard/dashboard.module").then((m) => m.DashboardPageModule)
            },{
                path: "book/:id",loadChildren: () => import("../pages/book/book.module").then((m) => m.BookPageModule)
            },{
                path: "book-title/:id/:id2",loadChildren: () => import("../pages/book-title/book-title.module").then((m) => m.BookTitlePageModule)
            },{
                path: "book-content/:id/:id2/:id3",loadChildren: () =>
                    import("../pages/book-content/book-content.module").then((m) => m.BookContentPageModule)
            },{
                path: "view-pdf",loadChildren: () => import("../pages/view-pdf/view-pdf.module").then((m) => m.ViewpdfpageModule)
            },{
              path: 'poultry',loadChildren: () => import('../pages/poultry/poultry.module').then( m => m.PoultryPageModule)
            },{
              path: 'grocery',loadChildren: () => import('../pages/grocery/grocery.module').then( m => m.GroceryPageModule)
            },{
              path: 'vegitables',loadChildren: () => import('../pages/vegitables/vegitables.module').then( m => m.VegitablesPageModule)
            },{
              path: 'cart',loadChildren: () => import('../pages/cart/cart.module').then( m => m.CartPageModule)
            },{
              path: 'thankyou',loadChildren: () => import('../pages/thankyou/thankyou.module').then( m => m.ThankyouPageModule)
            }
        ]
    }
];

@NgModule({
    imports: [RouterModule.forChild(routes)],exports: [RouterModule]
})
export class HomePageRoutingModule {}

家庭警卫

import { Injectable } from "@angular/core";
import { CanActivate,Router } from "@angular/router";
import { AuthConstants } from "../config/auth-constant";
import { StorageService } from "../services/storage.service";

@Injectable({
    providedIn: "root"
})
export class HomeGuard implements CanActivate {
    constructor(public storageService: StorageService,public router: Router) {}
    canActivate(): Promise<boolean> {
        return new Promise((resolve) => {
            this.storageService
                .get(AuthConstants.AUTH)
                .then((res) => {
                    if (res) {
                        resolve(true);
                    } else {
                        this.router.navigate(["login"]);
                        resolve(false);
                    }
                })
                .catch((err) => {
                    resolve(false);
                });
        });
    }
}

app.routing 

import { NgModule } from "@angular/core";
import { PreloadAllModules,RouterModule,Routes } from "@angular/router";

const routes: Routes = [
  {
    path: "",loadChildren: () => import("./index/index.module").then((m) => m.IndexPageModule)
  },{
    path: "",loadChildren: () => import("./home/home.module").then((m) => m.HomePageModule)
  },{
    path: "webinar",loadChildren: () => import("./pages/webinar/webinar.module").then((m) => m.WebinarPageModule)
  }
];
@NgModule({
  imports: [RouterModule.forRoot(routes,{ preloadingStrategy: PreloadAllModules,onSameUrlNavigation: "reload" })],exports: [RouterModule]
})
export class AppRoutingModule {}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

ionic-frameworkionic4ionic5