Question

将唯一提供多个组件的index.html物理页面作为虚拟组件，并将路由设置如下：

{path: 'cat/:name', component: CatComponent}

因此，我可以使用routingLink="/cat/tom"轻松访问该猫的名称。但是，如果我刷新页面或在浏览器地址栏http://localhost:8080/cat/tom中手动输入链接，则会收到错误404 not found。

我知道这是一个常见问题，Angular doc说：

使用此模式需要在服务器端重写URL，基本上是您必须重写所有链接到您的应用程序的入口点（例如index.html）

但似乎并不那么容易，我在哪里重写网址？我希望通过刷新/cat/tom我会获得相同的页面，而不是根页面。

使用HashLocationStrategy代替默认HTML5尝试了另一种方法，并使用nginx /#/cat/tom重写了特定资源的网址，因为它们可以通过直接路径轻松访问但又有一次失败 - that's why。

如何使Angular页面可刷新？ nginx是否有玩家？

Answer 1

嗯，现在确实有效。

现在可以刷新虚拟位置/cat/tom或/cat/bob，或通过直接网址访问它。刷新的页面不会丢失它的URL，也不会抛出404 not found错误。

Nginx conf：

server {
    listen       80;
    server_name  localhost;
    root /;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    location / {
        rewrite ^/cat/([a-z]+)$ / break;
        proxy_pass http://localhost:8080/;
    } 

    ...
}

添加了root /;和新location指令。

在正则表达式中忽略^$或忽略proxy_pass地址的尾部反斜杠是一个失败的想法。

现在一切都按预期工作。

Angular 2 - 如何使页面可刷新？

1 个答案: