javascript - Angular 2 页面路由错误

Question

这个问题已经有答案了:

Angular 2.0 router not working on reloading the browser (33 个回答)

已关闭 7 年前。

问题

为什么我无法刷新路由页面而不出现错误？

问题

我得到了一个onSelect在我的<navigation>指令并尝试加载我的 PageComponent进入<router-outlet> 。这确实有效，当您单击测试导航链接时，您可以看到我的页面已加载。

在我的真实代码中，如果我点击它，URL 就会更改为 http://localhost:3000/page/10 (10 只是一些 ID，不相关)。如果我现在刷新页面，我会收到错误。

它似乎在错误的路径上搜索 .js 文件 /page/node_modules而不是/node_modules/

错误

GET http://localhost:3000/page/style.css
GET http://localhost:3000/page/vendor.js
GET http://localhost:3000/page/node_modules/es6-shim/es6-shim.min.js
GET http://localhost:3000/page/node_modules/systemjs/dist/system-polyfills.js
GET http://localhost:3000/page/node_modules/angular2/bundles/angular2-polyfills.js
GET http://localhost:3000/page/node_modules/systemjs/dist/system.src.js
GET http://localhost:3000/page/node_modules/angular2/bundles/angular2.dev.js
GET http://localhost:3000/page/node_modules/rxjs/bundles/Rx.js
GET http://localhost:3000/page/node_modules/angular2/bundles/http.dev.js
GET http://localhost:3000/page/node_modules/angular2/bundles/router.dev.js
Uncaught ReferenceError: System is not defined

设置

我尝试在 plunkr 上设置我的示例。但我想你无法真正刷新那里来准确测试我的错误。

https://embed.plnkr.co/7P21IbHr8EOuUW7NjmFS/

Answer 1

可以用这个答案修复它:

https://stackoverflow.com/a/33573548/753628

出现错误是因为该路由实际上不存在。因此我们需要在 url 中使用 #。

import {provide} from 'angular2/angular2';
import {
  ROUTER_PROVIDERS,
  LocationStrategy,
  HashLocationStrategy
} from 'angular2/router';

和 Bootstrap :

bootstrap(AppCmp, [
  ROUTER_PROVIDERS,
  provide(LocationStrategy, {useClass: HashLocationStrategy})
]);

这会将我的网址更改为 http://localhost:3000/#/page/10如果刷新的话实际上不会失败。