编码的 url 没有以角度正确重定向，如何将编码的 url 路由到正确的地址？答案

【问题标题】：Encoded url is not redirecting properly in angular, how to route encoded url to proper address?编码的 url 没有以角度正确重定向，如何将编码的 url 路由到正确的地址？
【发布时间】：2021-05-31 06:45:15
【问题描述】：

如何将编码的特殊字符 url 重定向到正确的地址？在我的项目中编码的 url 路由到网页。我创建了类似这样的路线

{ 路径：'welcome/:id'，组件：WelcomeComponent }，

实际上我正在传递 url 之类的 http://localhost/welcome%3Fid%3D45 但这不接受它只接受 http://localhost/welcome?id=45

【问题讨论】：

标签： angular angular7 urlencode urldecode

【解决方案1】：

我有同样的问题，并混合了之前的两个答案：

1) 创建一个PageNotFoundComponent，并添加路由：

{ path: '**', component: PageNotFoundComponent }

2) 在构造函数中检测解码 URL 的可能更改：

export class PageNotFoundComponent implements OnInit
{
    constructor(private router: Router, private route: ActivatedRoute)
    {
        const url = decodeURIComponent(this.router.url);

        if (url !== this.router.url)
        {
            this.router.navigateByUrl(url);
        }
    }

    ngOnInit()
    {
    }
}

【讨论】：

这对我有用，我相信这是解决问题的好方法。
这对我有用，我相信这是解决问题的好方法。我试图复制粘贴这个 - onestepahead.dev/home/show-cards?categories=1 在我的浏览器地址栏中。但它正在转换为 - onestepahead.dev/home/show-cards%3Fcategories%3D1。这导致路由被我的 Angular 应用程序拒绝。上述解决方案对我来说完美无缺。可能存在边缘情况，但可以处理这些情况。我想知道是否还有其他解决方案？！

【解决方案2】：

router.navigateByUrl()

您可以使用带有绝对路径的router.navigateByUrl() 将router.navigate() 替换为相对URL。

URL Encoding breaking angular 2 navigation

【讨论】：

【解决方案3】：

也许使用 encodeURIComponent 发送参数，并使用 decodeURIComponent 使其在接收后可读

【讨论】：

我更新了我的问题。主要问题是编码的 url 不接受...我应该在哪里使用 decodeURIComponent() 这个方法以及如何使用？
url 是手动构建还是由路由器构建？如果手动 ...?id=encodeURIComponent(value) if Router this.router.navigate([path], { queryParams: { id: encodeURIComponent(value) } });
实际上我是从其他站点重定向到我的站点获取此 url...我无法更改该 url，我必须在这里解码@Damian Pioś
你可以像 {path: '**', component: 'WelcomeComponent'} 这样配置你的路由器，然后在组件中订阅ActivatedRoute#url，在这里你应该得到' Welcome%3Fid%3D45' 对其进行转换、解码并重新路由到特定路径。 path: '**' 必须在配置数组的末尾

【解决方案4】：

在定义类似{ path: 'welcome/:id', component: WelcomeComponent } 的路由时，您通常会在浏览器中这样称呼它：/welcome/45

您提到的网址（http://localhost/welcome?id=45）改为使用查询参数（id），不确定这是否会映射到相同的。此 URL 的 ? 不得编码，因为它是 URL 中的一些保留字符，用于指示 URL 参数。

如果生成这些 URL 的系统实际上为您提供了这些错误的 URL（从这里的另一条评论中读取，这些 URL 不是您生成的），您必须先手动解码 URL。

【讨论】：

【解决方案5】：

{path: '**', component: 'NotFoundComponent'}

export class NotFoundComponent{
constructor(private router:Router,
          private route: ActivatedRoute,
          ) { 
            let url = this.router.url;
            url = url.replace(/%40/gi, '@')
            .replace(/%3A/gi, ':')
            .replace(/%24/gi, '$')
            .replace(/%2C/gi, ',')
            .replace(/%3B/gi, ';')
            .replace(/%2B/gi, '+')
            .replace(/%3D/gi, '=')
            .replace(/%3F/gi, '?')
            .replace(/%2F/gi, '/');
            if(url !== this.router.url){
                 this.router.navigate([url]);
              }
}

【讨论】：