9

我正在使用 Angular 6，但在更改路线时遇到了问题。如果我使用 routerLink 或 navigate() 方法浏览应用程序，它可以正常工作，因为它只加载新模块（如果需要）。但例如，如果我在这个链接中：localhost:8080/home，我点击 URL，取消 'home'，写 'profile' 并按 Enter，它会正确进入配置文件页面，但重新加载应用程序（也是应用程序组件）。为什么？我想不通。这是我的路由：

const appRoutes: Routes = [
  { path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
  { path: 'profile', component: ProfileComponent, canActivate: [AuthGuard] },
  { path: 'login', component: LoginComponent },
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

也许问题出在 auth-guard 上？

@Injectable()
export class AuthGuard implements CanActivate {

constructor(private store: Store<fromApp.AppState>, private route: ActivatedRoute, private router: Router) {
}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this.store.select('auth')
        .pipe(take(1),
            map((authState: fromAuth.State) => {
                if (authState.authenticated) {
                    return true;
                } else {
                    let sessionStorageToken: string = sessionStorage.getItem('token');
                    if (sessionStorageToken) {
                        this.store.dispatch(new AuthActions.Login());
                        this.store.dispatch(new AuthActions.SetToken(sessionStorageToken));
                        return true;
                    } else {
                        let url = state.url;
                        this.router.navigate(['/login', { redirectTo: url }]);
                        return false;
                    }
                }
            }));
}
}

这是 profile.module.ts：

@NgModule({
declarations: [
    ProfileComponent
],
imports: [
    CommonModule,
    FormsModule
]
 })
 export class ProfileModule { }
4

5 回答 5

6

您可以使用

RouterModule.forRoot(
  ROUTES,
  { useHash: true }
)],

哈希将阻止应用程序重新加载。因此，当您在地址栏上按 Enter 时，应用程序只会更改要显示的组件。

于 2019-02-04T15:56:30.113 回答
5

当您routerLink在 Angular 中导航时，底层的 JavaScript 正在确定向浏览器提供什么。这意味着当通过 Angular 路由器更改 URL 地址时，它会接收更改并相应地为组件提供服务。

当您手动更新 URL 并按 Enter 键时，就像进入一个新网页一样。这意味着服务器需要重新为基础网站提供服务http://localhost:1234，然后应用程序将在那里处理路由，/profile并提供所需的组件。

我试图用一种非常简单的方式来解释它，更详尽的解释请查看Angular 文档

于 2018-07-04T08:20:42.767 回答
4

当使用 routerLink 时，JavaScript 会更改 URL ，即不视为重新加载网页。

但是，当您在地址栏中按回车键时，页面会重新加载，即再次从提供 index.html 的服务器提供内容（如果您没有定义任何其他 HTML 来代替 index )，因此应用程序重新初始化。

这就是为什么所有组件都被重新加载的原因。

正如@Wesley 所建议的，您可以参考角度文档以获取更多信息。

https://angular.io/guide/router

您可以浏览下面提到的博客以进行部署。

https://arjunphp.com/deploy-angular-app-production-nginx/

这里要注意的主要是try_files $uri $uri/ /index.html =404;. 当在地址栏上按下回车键时，NGINX 首先检查给定的 URL 是否映射到服务器上的某个文件/路由。如果它不存在，在我们的例子中localhost:8080/profile，它不存在，因为没有这样的物理路径。因此，NGINX 会为/index.html文件提供服务，然后会获取所有 JS 文件，这些文件会依次处理路由。

如果您需要使用 API，您可以使用 NGINX 的反向代理机制来重定向例如/api/路径到您相应的服务器。

于 2018-07-04T10:23:20.620 回答
0

路由基本上用于延迟加载应用程序，一次一个模块。每条路线都依赖于前一条路线，依此类推。因此，当您手动输入 url 时，应用程序将重新加载路由中的所有组件。

于 2018-07-04T08:21:17.337 回答
-1

我回答这个问题有点晚了，但也许这也会对某人有所帮助。

您可以创建一个 .htaccess 文件，它将所有请求传输到您的 index.html 文件

.htaccess

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>
于 2021-07-28T13:48:48.210 回答