Question

我有一个简单的场景。我的应用程序以默认组件开始，例如 StartComponent ，它是通过Angular路由器使用名为 start 的路由来访问的。因此，在浏览器栏中，我会看到类似myhost/start的内容。

当我导航到名为 second 的路由时，应用程序的逻辑将我带到第二个组件 SecondComponent ，因此在浏览器栏中，我看到{{ 1}}。

如果现在我刷新浏览器，例如通过 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;
    }

}

总是返回true可能看起来很奇怪，但是如果返回false，则会取消路由更改并同时阻塞navigateByUrl()。

将其放置在路由器配置的顶层，它将仅执行一次。刷新浏览器后，它将触发重定向。

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

角度-从辅助路径刷新浏览器时如何始终在起始页面上着陆

1 个答案: