将所有带有散列的 URL 重定向到没有散列的 Angular Routes [英] Redirect all URLs with hash to Angular Routes without hash

问题描述

我正在用 Angular 5.x SPA 替换现有的 AngularJS 1.6.x SPA，并且我希望更改对我的用户透明.

我担心用户拥有现有应用的书签，因为它在 URL 中包含哈希值(例如:example.com/#/menu 和 example.com/#/item/37);

但是，新应用的网址中没有哈希值(例如:example.com/menu 和 example.com/item/37).

路径和路由都是一样的，除了当前应用中的#/.

有没有办法配置 Angular 路由以删除 #/ 并使用新应用的无哈希路由配置?

我可以复制我的所有路由以适应带有和不带有哈希值的路径，但必须有一种不需要将我的代码加倍的方法.

//真的不想这样做:const 路由:路由 = [{路径:'菜单'，组件:菜单组件},{路径:'#/菜单'，组件:菜单组件},//等等.];

同样，重定向每个 #/ 路径也会使代码加倍.

//真的不想这样做:const 路由:路由 = [{路径:'菜单'，组件:菜单组件},{路径:'#/菜单'，重定向到:'菜单'},//等等.];

我希望有一些类似的东西:

<代码>{小路: '#/*'，redirectTo: '*'//以某种方式在此处引用路径的通配符部分}

预先感谢您的帮助.

解决方案

@Yanis 发布的答案几乎 有效，但需要稍作调整.他的回答绝对值得点赞.但是，以下是我实施的工作解决方案:

导出类 AppComponent 实现 OnInit {构造函数(私有路由器:路由器){}ngOnInit() {this.router.events.subscribe(event => {如果(导航开始的事件实例){if (!!event.url && event.url.match(/^\/#/)) {this.router.navigate([event.url.replace('/#', '')]);}}});}}

I'm replacing an existing AngularJS 1.6.x SPA with an Angular 5.x SPA and I want to make the change transparent to my users.

I'm concerned about users who have bookmarks to the existing app because it has hashes in the URLs (for example: example.com/#/menu and example.com/#/item/37);

However, the new app does not have hashes in the URLs (for example: example.com/menu and example.com/item/37).

The paths and routing are all the same, with the exception of the #/ in the current app.

Is there a way I can configure the Angular routing to drop the #/ and use the hash-free routing configuration of the new app?

I could duplicate all of my routing to accommodate paths with and without the hash, but there must be a way that doesn't require doubling my code.

// Don't really want to do this:
const routes: Routes = [
  {
    path: 'menu',
    component: MenuComponent
  },
  {
    path: '#/menu',
    component: MenuComponent
  },
  // etc.
];

Similarly, redirecting every #/ path would double the code, too.

// Don't really want to do this:
const routes: Routes = [
  {
    path: 'menu',
    component: MenuComponent
  },
  {
    path: '#/menu',
    redirectTo: 'menu'
  },
  // etc.
];

I'm hoping there is something along these lines:

{
  path: '#/*',
  redirectTo: '*' // Somehow reference the wildcard part of the path here 
}

Thanks in advance for your assistance.

解决方案

The answer posted by @Yanis almost worked, but required a few slight tweaks. His answer definitely deserves an upvote; however, below is the working solution I implemented:

export class AppComponent implements OnInit {
    constructor (private router: Router) { }

    ngOnInit() {
      this.router.events.subscribe(event => {
        if (event instanceof NavigationStart) {
          if (!!event.url && event.url.match(/^\/#/)) {
            this.router.navigate([event.url.replace('/#', '')]);
          }
        }
      });
    }
}

这篇关于将所有带有散列的 URL 重定向到没有散列的 Angular Routes的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！