Angular

Question

我有一个简单的场景。我的应用程序以默认组件开始，比方说 StartComponent，它是通过 Angular 路由器使用名为 start 的路由到达的。所以在浏览器栏中我看到类似 myhost/start.

的内容

当我导航到名为 second 的路由时，应用程序的逻辑将我带到第二个组件 SecondComponent，所以在浏览器栏中我看到 myhost/second.

如果现在我刷新浏览器，例如通过 Command-R 或 Ctrl-F5, 我再次登陆 SecondComponent.

我希望看到的是浏览器的刷新将我再次带到 StartComponent，无论我从哪里进行刷新。

实现此行为的最简洁方法是什么？

Answer 1

如果用户未登录，这与重定向到登录的策略基本相同。您可以使用 CanActivate 执行路由器重定向，但不会阻止路由更改（即它总是解析为 true).

@Injectable()
export class CanActivateStart implements CanActivate {
    public constructor(private _router: Router) {

    }

    public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        if(!(route.component instanceof StartComponent)) {
           this._router.navigateByUrl('/start'); 
        }
        return true;
    }

}

它可能看起来总是 return true 很奇怪，但是如果你 return false 它会取消路由更改，同时阻止 navigateByUrl().

把它放在路由器配置的顶层，它只会被执行一次。当浏览器刷新时它会触发重定向。

const routes = [
     {
        canActivate: [CanActivateStart],
        children: [
           // the routes you want to force a redirect
        ]
     }, {....}
]

Angular - 从二级路由刷新浏览器时如何始终登陆起始页

Angular - how to land always on the start page when refreshing the browser from a secondary route

angular-routing

angular-router