Question

我有一个带有以下路线的角度2应用程序：

MyExporter

等。当我以下列方式更改路线时：

@RouteConfig([
new Route({ path: '/', component: Home, name: 'Home', useAsDefault: true}),
new Route({ path: '/employees', component: ViewEmployees, name: 'ViewEmployees'}),
new Route({ path: '/employees/add', component: AddEmployee, name: 'AddEmployee'}),
])

没有问题。我可以从主页或AddEmployee路由以这种方式更改路由。当我在AddEmployee路线并尝试以编程方式更改路线时，问题出现了：

<a [routerLink]="['ViewEmployees']">View Employees</a>

它不起作用。它将我发送到ViewEmployees视图，然后重新加载整个应用程序。如果我从Home组件执行相同的程序化路由更改，我没有任何问题;该应用程序不会重新加载。

有没有人有任何想法为什么它只会在这种情况下这样做？我需要它才能工作，以便我可以保存已添加的员工，然后返回员工列表视图。

提前感谢您的帮助！

Answer 1

您是否在navigate()标记内拨打了<form>？

我遇到了同样的问题。在Angular2s GitHub上存在一些描述此行为的问题，但它们都已关闭，因为它们属于旧路由器。当您在表单内的提交按钮调用的函数内使用router.navigate()时，似乎会发生页面重新加载。这可能会导致浏览器在URL末尾附加?并重新加载。

解决方案非常简单： return false函数末尾只需navigate()。这可以防止bowser在提交表单时使用它的默认操作。通常，角度会停止这种默认行为，但奇怪的是不会出现这种情况。

Answer 2

来自RouterLink docs：

第一个路径名称应以/，。/或../为前缀。如果路由以/开头，则路由器将从应用程序的根目录查找路由。如果路由以./开头，则路由器将查找当前组件的子路由。如果路由以../开头，路由器将查看当前组件的父节点。

使用：

<a [routerLink]="['/ViewEmployees']">View Employees</a>

Answer 3

您是否设置了<base href>？

正如Router guide

中所述

在打开index.html标记后，将以下代码添加到head：

<base href="/">

Angular 2 App重新加载路线变化

3 个答案: