Angular4刷新页面在url中重复页面_Angular_Routing

Angular4刷新页面在url中重复页面

angular routing

Angular4刷新页面在url中重复页面,angular,routing,Angular,Routing,我是一个有棱角的新手，做了一个简单的单页传呼机。我有路由器设置，以便空url重定向到仪表板组件。因此，localhost:4200将自动路由到localhost:4200/dashboardPerfect 但是，如果我单击刷新按钮，它会在url上附加另一个仪表板，奇怪的是，页面实际上加载得很好。 localhost:4200/仪表板/仪表板如果我再次点击refresh，它会向url添加另一个仪表板，现在它不会加载 localhost:4200/dashboard/dashboard/dashb

我是一个有棱角的新手，做了一个简单的单页传呼机。我有路由器设置，以便空url重定向到仪表板组件。因此，

localhost:4200

将自动路由到

localhost:4200/dashboard

Perfect

但是，如果我单击刷新按钮，它会在url上附加另一个仪表板，奇怪的是，页面实际上加载得很好。

localhost:4200/仪表板/仪表板

如果我再次点击refresh，它会向url添加另一个仪表板，现在它不会加载

localhost:4200/dashboard/dashboard/dashboard

问题是，为什么每次页面刷新时都会不断地在我的url中添加“/dashboard”

这是routing.module.ts

import { Routes, RouterModule } from '@angular/router';

import { DashboardComponent } from '../_feature/iacuc/dashboard.component';

const appRoutes: Routes = [
    { path: '', redirectTo: 'dashboard', pathMatch: 'prefix' },
    { path: 'dashboard', component: DashboardComponent }

    // otherwise redirect to home
    { path: '**', redirectTo: '' }
];

export const Routing = RouterModule.forRoot(appRoutes);

这是我的index.html

<!DOCTYPE html>
<html>
<head>
    <base href="/" >
    <title>Angular 2 JWT Authentication Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- bootstrap css -->
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

    <!-- application css -->
    <link href="app.css" rel="stylesheet" />

    <!-- polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
        System.import('app').catch(function (err) { console.error(err); });
    </script>
</head>
<body>
    <app>Loading...</app>
</body>
</html>


Angular 2 JWT身份验证示例
System.import（'app'）.catch（函数（err）{console.error（err）；}）；
加载。。。

其余的代码是您在介绍性示例中看到的样板代码，但是如果有帮助的话，我可以展示更多的代码

谢谢。

需要使用路径匹配：“完整”而不是路径匹配：“前缀” 阅读此处： pathMatch:“prefix” 更改为pathMatch:“full” 关键字字面上是“prefix”哈哈，“full”也不起作用。如果你在index.html 中的标题的顶部没有base href，请尝试将其添加为：（），我也有它。我更新了我的问题以显示我的index.html。我想我可能只是下载Angular.io hero应用程序并与我的应用程序交换它们的页面，而不是从头开始并尝试在我的代码中找到这个神秘的bug。除了将其更改为pathMatch之外，正如您所建议的：“full”，还需要将路由从使用字符串更改为使用组件名称。它将该字符串附加到根url。正确的路由：{path:''，组件：DashboardComponent，pathMatch:'full'}我试图添加pathMatch:'full'，但仍然遇到相同的问题，在重新加载页面时在URL中添加相同的页面名称。还有其他解决方案吗？在使用命令ng build--prod--aot--base href生成构建之后，我遇到了这个问题