Question

我是一个Angular newb并构建一个简单的一个寻呼机。我有路由器设置，以便空URL重定向到Dashboard组件。因此localhost:4200会自动转到localhost:4200/dashboard完美。

但是，如果我单击刷新按钮然后它会将另一个仪表板附加到该URL，奇怪的是该页面实际上正常加载。 localhost:4200/dashboard/dashboard

如果我再次点击刷新，它会在网址上添加另一个信息中心，现在无法加载

localhost:4200/dashboard/dashboard/dashboard

问题是，为什么每次刷新页面时都会在我的网址上添加“/ 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>

代码的其余部分是您在介绍性示例中看到的样板，但如果它有用，我可以显示更多代码。

感谢。

Answer 1

需要使用 pathMatch: 'full' 而不是 pathMatch: 'prefix'

请在此处阅读：https://angular.io/api/router/Routes

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

1 个答案: