Angular 4 路由器 : How to not display parameters in the url bar?

Question

当我使用时:

  constructor(router: Router) {
    router.navigate(['page2', 123456789]);
  }

我在地址栏中看到 example.com/page2/123456789。有可能隐藏它吗？我不希望有人能够输入 example.com/page2 以便他/她导航到这个特殊页面。它只能在内部使用命令 router.navigate(['xy', 'parameter']);

Answer 1

angularJS 或 angularjs 1.x 中的状态路由可以在路由期间使用动态数据隐藏参数，但 Angular 2+ 路由不允许。

唯一的解决方案是使用下面阅读的其他服务。

param 并不意味着被隐藏，但 data 属性是。因此，与其使用 SkipLocationChange: true，不如使用 data 属性。注意数据属性不能用于动态内容。它将更多的是静态数据。

SkipLocationChange: true 在不将新状态推送到历史记录的情况下进行导航。这意味着如果您从/page1 导航到/page2，那么导航后 url 仍将显示/page1。这不是作者所期待的。这里的期望是在 url 中显示/page2，但在 url 中没有可见的参数。

解决方案是在路由配置中使用数据属性例如

 path: 'product', component: ProductComponent , data: [{isProd: true}]}

然后就可以得到数据的值如下图

 route.snapshot.data[0]['isProd'];