Angular 5路由和导航带有URL误差

Question

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

如果您通过此https://fit.simpleclouder.com/输入链接。

如果您通过此https://fit.simpleclouder.com/home输入链接。

如果您通过此https://fit.simpleclouder.com/benefics输入链接。

如果我单击网站上的菜单，则可以。

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

Answer 1

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

goto this url https://fit.simpleclouder.com/#/home。

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

在您的路由器config Pass {useHash：true} 作为第二个参数

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

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

Answer 2

它不是角质问题，它在您的IIS或Apache Server中对于iis make web.config并放置

<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 make .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

玩得开心并根据需要编辑路由