编码的 url 在 angular 中没有正确重定向，如何将编码的 url 路由到正确的地址？

Question

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

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

实际上我正在通过 url 喜欢 http://localhost/welcome%3Fid%3D45 但这不接受它只接受 http://localhost/welcome?id=45

Answer 1

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

Answer 2

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

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

如果生成那些 URLs 的系统实际上给你这样错误的 URLs（从这里的另一条评论中读到那些 URLs 不是你生成的），你必须先手动解码 URL。

Answer 3

{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]);
              }
}

Answer 4

router.navigateByUrl()

您可以将 router.navigateByUrl() with absolute path to replace the router.navigate() 与相对 URL 一起使用。

Answer 5

我遇到了同样的问题，并且混淆了之前的两个答案：

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()
    {
    }
}

编码的 url 在 angular 中没有正确重定向，如何将编码的 url 路由到正确的地址？

Encoded url is not redirecting properly in angular, how to route encoded url to proper address?

urlencode

urldecode

angular

angular7