Angular4刷新页面在URL中重复页面 [英] Angular4 refresh page repeats page in url
问题描述
我是Angular newb，并且构建了一个简单的单页传呼机。我有路由器设置，以便空的URL重定向到仪表板组件。因此 localhost：4200 将自动路由到 localhost：4200 / dashboard 完美。
I'm an Angular newb and build a simple one pager. I have the router setup so that the empty url redirects to Dashboard component. Hence localhost:4200 will automatically route to localhost:4200/dashboard Perfect.
但是，如果我单击刷新按钮，则它将另一个仪表板附加到URL，奇怪的是，该页面实际上可以正常加载。
localhost：4200 / dashboard / dashboard
However, if I click the refresh button then it appends another dashboard to the url, and oddly enough the page actually loads fine.
localhost:4200/dashboard/dashboard
如果我再次点击刷新，它将向另一个添加仪表板网址，现在将无法加载
If I hit refresh again it adds a another dashboard to the url and now it won't load
localhost:4200/dashboard/dashboard/dashboard
问题是，为什么每次刷新页面时都会在我的网址中不断添加 / dashboard？
The question being, why does it keep adding '/dashboard' to my url on every page refresh?
这里是routing.module.ts
Here is 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
Here is my 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>
其余的代码是您在介绍示例中看到的样板，但是如果有，我可以显示更多代码
The rest of the code is boilerplate you see in the introductory examples, but I can show more code if it's helpful.
谢谢。
推荐答案
需要使用 pathMatch：完整 ，而不是 pathMatch：前缀
Need to use pathMatch: 'full' instead of pathMatch: 'prefix'
在此处阅读： https：// angular。 io / api / router / Routes
这篇关于Angular4刷新页面在URL中重复页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
