时间戳

首页 > 解决方案 > 防止 Angular 应用程序在首次启动时重新路由到 root

angular - 防止 Angular 应用程序在首次启动时重新路由到 root

问题描述

开始的一些上下文：
我的应用程序使用 Apache (2.4) 提供服务，并且没有专用的虚拟主机（根据要求）。

以下基本上是我的路线配置：

const appRoutes = [
    { path: 'a/:id', component: AComponent }, // Use this route to set some query params
    { path: 'b/:id', component: AComponent }, // Use this route to set some query params
    { path: '', component: AComponent, pathMatch: 'full' }, // Use this route as default query params
    { path: '**', component: DefaultComponent } // Reject everything else
];
const routing = RouterModule.forRoot(appRoutes, {
    useHash: true,
});

在本地开发过程中，一切都很好。但是当上传到我的服务器并尝试使用路由启动应用程序时a/123，它会丢弃路由以加载根路由（/）。
我尝试启用路由跟踪，我可以看到它首先加载了正确的路由（a/123）然后重新路由到/，我不知道为什么。
在第一次重新路由到 之后/，我可以导航到我想要的任何路线，但我需要它留在我打开应用程序的路线上。

我欢迎就此事发表任何意见。

或者，如果路由是一种混乱的处理方式，我可以使用 URL 的 queryParams 部分（如myapp/?a=123）。那行得通吗？

编辑以增加清晰度：

启动时发生的情况是：

request www.myapp.xyz/a/123
  |_ detect angular route 'a/123'
    |_ re-route to ''
      |_ Load AComponent with parameters for route ''

我需要它做什么：

request www.myapp.xyz/a/123
  |_ detect angular route 'a/123'
    |_ Load AComponent with parameters for route 'a/123'

编辑以添加路由器跟踪：

Router Event: t
    main.js:1 NavigationStart(id: 1, url: '/a/123')
main.js:1 Router Event: t
    main.js:1 RoutesRecognized(id: 1, url: '/a/123', urlAfterRedirects: '/a/123', state: Route(url:'', path:'') { Route(url:'a/123', path:'a/:id') } )
main.js:1 Router Event: t
    main.js:1 GuardsCheckStart(id: 1, url: '/a/123', urlAfterRedirects: '/a/123', state: Route(url:'', path:'') { Route(url:'a/123', path:'a/:id') } )
main.js:1 Router Event: e
    main.js:1 ChildActivationStart(path: '')
main.js:1 Router Event: e
    main.js:1 ActivationStart(path: 'a/:id')
main.js:1 Router Event: t
    main.js:1 GuardsCheckEnd(id: 1, url: '/a/123', urlAfterRedirects: '/a/123', state: Route(url:'', path:'') { Route(url:'a/123', path:'a/:id') } , shouldActivate: true)
main.js:1 Router Event: t
    main.js:1 ResolveStart(id: 1, url: '/a/123', urlAfterRedirects: '/a/123', state: Route(url:'', path:'') { Route(url:'a/123', path:'a/:id') } )
main.js:1 Router Event: t
    main.js:1 ResolveEnd(id: 1, url: '/a/123', urlAfterRedirects: '/a/123', state: Route(url:'', path:'') { Route(url:'a/123', path:'a/:id') } )
main.js:1 Router Event: e
    main.js:1 ActivationEnd(path: 'a/:id')
main.js:1 Router Event: e
    main.js:1 ChildActivationEnd(path: '')
main.js:1 Router Event: t
    main.js:1 NavigationEnd(id: 1, url: '/a/123', urlAfterRedirects: '/a/123')
main.js:1 Router Event: e
    main.js:1 Scroll(anchor: 'null', position: 'null')
main.js:1 Router Event: e
    main.js:1 Scroll(anchor: 'null', position: 'null')
main.js:1 Router Event: t
    main.js:1 NavigationStart(id: 2, url: '/home')
    main.js:1 t {id: 2, url: "/home", navigationTrigger: "imperative", restoredState: null}
main.js:1 Router Event: t
main.js:1 RoutesRec 
    main.js:1 t {id: 2, url: "/home", urlAfterRedirects: "/", state: t}
main.js:1 Router Event: t
    main.js:1 GuardsCheckStart(id: 2, url: '/home', urlAfterRedirects: '/', state: Route(url:'', path:'') { Route(url:'', path:'') } )
    main.js:1 t {id: 2, url: "/home", urlAfterRedirects: "/", state: t}
main.js:1 Router Event: e
    main.js:1 ChildActivationStart(path: '')
main.js:1 Router Event: e
    main.js:1 ActivationStart(path: '')
main.js:1 Router Event: t
    main.js:1 GuardsCheckEnd(id: 2, url: '/home', urlAfterRedirects: '/', state: Route(url:'', path:'') { Route(url:'', path:'') } , shouldActivate: true)
    main.js:1 t {id: 2, url: "/home", urlAfterRedirects: "/", state: t, shouldActivate: true}
main.js:1 Router Event: t
    main.js:1 ResolveStart(id: 2, url: '/home', urlAfterRedirects: '/', state: Route(url:'', path:'') { Route(url:'', path:'') } )
    main.js:1 t {id: 2, url: "/home", urlAfterRedirects: "/", state: t}
main.js:1 Router Event: t
    main.js:1 ResolveEnd(id: 2, url: '/home', urlAfterRedirects: '/', state: Route(url:'', path:'') { Route(url:'', path:'') } )
    main.js:1 t {id: 2, url: "/home", urlAfterRedirects: "/", state: t}
main.js:1 Router Event: e
    main.js:1 ActivationEnd(path: '')
main.js:1 Router Event: e
    main.js:1 ChildActivationEnd(path: '')
    main.js:1 e {snapshot: e}
main.js:1 Router Event: t
    main.js:1 NavigationEnd(id: 2, url: '/home', urlAfterRedirects: '/')
    main.js:1 t {id: 2, url: "/home", urlAfterRedirects: "/"}
main.js:1 Router Event: e
    main.js:1 Scroll(anchor: 'null', position: 'null')
    main.js:1 e {routerEvent: t, position: null, anchor: null}
main.js:1 Router Event: e
    main.js:1 Scroll(anchor: 'null', position: 'null')

标签： angularangular-router

解决方案

我终于找到了重新路由的原因。

修改大型项目时，请始终检查 3rd-party 模块是否不干扰！
我正在使用ngx-joyride模块并且正在使用内置路由，它当然试图重新路由。

正确答案是"Silly me, check your imported modules"

推荐阅读