Angular 5 路由和导航有 URL 错误

Question

我在开发一个小项目 Angular 5，我在代码中做了路由器配置，如果我点击导航栏中的菜单我可以在组件之间导航，但是如果我通过 URL 它给我错误。

如果你通过这个 https://fit.simpleclouder.com/ 输入 link 就可以了。

如果你通过这个https://fit.simpleclouder.com/home输入link是不行的。

如果你输入link按这个https://fit.simpleclouder.com/benefics是不行的。

如果我点击网站上的菜单，就可以了。

在 ftp 的主文件夹中，我在文件夹 "laravel/public/fit" 上有这个项目，因为我在主文件夹上有另一个项目 Laravel。

Answer 1

这不是 angular 问题，问题出在您的 IIS 或 Apache 服务器中对于 IIS make web.config 和 put

<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

在 Apache 中制作 .htaccess 文件并放入

RewriteEngine On  
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html

玩得开心，根据需要编辑路线

Answer 2

而不是https://fit.simpleclouder.com/home

转到这个 URL https://fit.simpleclouder.com/#/home .

为了简单起见，我们使用基于哈希的路由。

在你的路由器配置中传递 { useHash: true } 作为第二个参数

const rootRouting: ModuleWithProviders = RouterModule.forRoot([
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'profile',
    component: ProfileComponent
  }
], { useHash: true });

因此这将使基于哈希的路由成为保证在几乎任何环境设置中工作的保证。

Angular 5 路由和导航有 URL 错误

Angular 5 routing and navigation with URL Error

html

javascript

typescript

angular

angular5