angular - Angular 12 Routing 在 URL 中显示 UTF-8 字符，例如“%2F”、“%3F”，并且显示无法匹配任何路由。URL段错误

问题描述

我有一个 Angular 应用程序，它需要在登录后显示主页。当应用程序正确登录时，URL 栏中显示的 URL 包含 UTF-8 字符，例如'!'、'%2F'、'%3F'，重新加载时会显示错误Error: Cannot match any routes. URL Segment: '!'

应用程序路由.module.ts

const routes: Routes = [
    {
        path: '',
        redirectTo: 'home',
        pathMatch: 'full'
    },
    {
        path: 'login',
        component: LoginComponent,
        pathMatch: 'full'
    },
    {
        path: 'screen/:screenName',
        component: ScreenComponent,
        pathMatch: 'full',
        canActivate: [AuthGuard]
    },
    {
        path: 'screen/:screenClassName/:screenId',
        component: ScreenComponent,
        pathMatch: 'full',
        canActivate: [AuthGuard]
    },
    {
        path: 'home',
        component: HomeComponent,
        canActivate: [AuthGuard]
    },
];

@NgModule({
    imports: [
        RouterModule.forRoot(routes, {
            useHash: true,
            onSameUrlNavigation: 'reload',
            relativeLinkResolution: 'legacy',
            enableTracing: true
        })
    ],
    exports: [RouterModule]
})
export class AppRoutingModule { }

为了导航到路线，使用以下功能

导航方式

        this.router.navigate(urlTree, navigationExtras).then((state) => {
            if (state) {
                const [path, ...paramsValues] = urlTree;
                const safePath = path ? path.replace('/', '') : path;
                const params = this.routeParams.getParamsFromPath(safePath, paramsValues);

                if (navigationExtras && navigationExtras.queryParams) {
                    this.routeParams.setParams(Object.assign(navigationExtras.queryParams, params));
                }
            }
        });

    setParams(params: object) {
        for (const key in params) {
            if (params.hasOwnProperty(key)) {
                this[key] = params[key];
            }
        }
    }

     getParamsFromPath(path: string, params: any[]): any {
        if (!path) {
            return null;
        }

        const activeRoute = this.router.config.find((route) => {
            const inPathParams = route.path.split('/');

            if (inPathParams[0] === path) {
                return (inPathParams.length - 1) === params.length;
            }

            return false;
        });

        if (!activeRoute) {
            return null;
        }

        const activeRouteParams = activeRoute.path.split('/');

        const routeParamsObj = {};
        activeRouteParams.forEach((paramKey) => {
            if (paramKey.startsWith(':')) {
                const key = paramKey.replace(':', '');
                routeParamsObj[key] = params.shift();
            }
        });

        return routeParamsObj;
    }

现在，当应用程序在登录后移动到新路由时，它会在浏览器的 URL 栏中显示以下类型的 URL

http://localhost:4200/#!#%2Fhome%3Fguid=c217-21f6-189f-8b69-a1a6&screenId=3b3f2275-0ad4-48d6-bd76-8270cb9b9807

在浏览器中使用上述 URL，当我们尝试重新加载页面时，它会显示以下错误并重定向回登录页面

错误：无法匹配任何路由。网址段：'！'

Angular Version used: 12.2.9

这可能是 Angular 12 的问题，还是我在这里做错了什么？

标签： angularangular-routerangular-route-segmentangular-router-params

angular - Angular 12 Routing 在 URL 中显示 UTF-8 字符，例如“%2F”、“%3F”，并且显示无法匹配任何路由。URL段错误

问题描述

应用程序路由.module.ts

导航方式

错误：无法匹配任何路由。网址段：'！'

解决方案

推荐阅读