此错误通常由在刷新带有子级路由的页面时导致的。解决这个问题的方法是使用HashLocationStrategy代替PathLocationStrategy(也称为HTML5 URL策略)。HashLocationStrategy使用URL中的哈希标记来管理路由状态,因此刷新页面时,页面仍然处于正确的状态。
在app.module.ts文件中进行修改:
import { NgModule } from '@angular/core';
import { RouterModule, Routes, Router, NavigationEnd } from '@angular/router';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
const routes: Routes = [
// your routes here
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]
})
export class AppRoutingModule {
constructor(private router: Router){
// subscribe to router events and scroll to top on route change
this.router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
document.body.scrollTop = 0;
}
});
}
}
通过将LocationStrategy提供的“useClass”选项设置为HashLocationStrategy,即可使用哈希路由策略。在Router构造函数中,订阅路由事件,以便在路由更改时将窗口滚动到顶部。
上一篇:Angular刷新路由的问题