Angular4刷新页面在url中重复页面
问题描述:
我是一个有角的newb并构建了一个简单的寻呼机。我有路由器设置,以便空的url重定向到Dashboard组件。因此localhost:4200
会自动转到localhost:4200/dashboard
完美。Angular4刷新页面在url中重复页面
但是,如果我点击刷新按钮,它会追加另一个仪表板到网址,奇怪的是,页面实际上加载罚款。 localhost:4200/dashboard/dashboard
如果我打再次刷新它增加了一个其他信息中心的URL,现在它不会加载
localhost:4200/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>
的代码的其余部分是你在介绍例子中看到的样板,但我可以显示更多代码是否有用。
谢谢。
答
需要使用pathMatch: 'full'
代替pathMatch: 'prefix'
+0
除了按照您的建议将其更改为pathMatch:'full'外,还需要更改从使用字符串到使用组件名称的路由。它将该字符串附加到根网址。正确的路线:{path:'',component:DashboardComponent,pathMatch:'full'} – user441058
'pathMatch: 'prefix''改变'pathMatch:' full'' –
的关键词是字面上的 '前缀' haha – Carsten
'full'也不起作用。 – user441058