Question

我尝试重定向到路线/网址并在最后附加一个哈希值，但Aurelia一直告诉我ERROR [app-router] Error: Route not found: /#the-hash-i-added。

这是我用于在授权管道步骤中重定向到新路线的基本代码：

return next.cancel(new Redirect(this.router.generate('home')));

此工作正常，并将非授权用户重定向到主页。但是，我希望他们最终在主页上的一个特定部分，因此哈希。

现在，由于Redirect类以URL作为参数，我认为我只是在最后添加哈希，如下所示：

return next.cancel(new Redirect(this.router.generate('home') + '#hash-where-i-want-to-end-up'));

当Aurelia成功重定向到正确的网址（/#hash-where-i-want-to-end-up在浏览器的网址栏中设置）时，它仍会抛出上述错误并且不会呈现网页。

我实际上设法通过在重定向发生后手动添加哈希来解决这个问题，并使用setTimeout：

setTimeout(() => {
    window.location.hash = '#hash-where-i-want-to-end-up';
});

return next.cancel(new Redirect(this.router.generate('home')));

但这不仅仅是一种肮脏，肮脏的黑客行为，它在其他情况下也不能很好地运作。

所以，我的问题是，如何重定向到路由并在末尾添加哈希？

毋庸置疑，我在我的应用程序中使用pushState: true和hashChange: false。

编辑：由于某种原因，我无法在gist.run上运行pushState个应用，但我使用这个非常基本的设置设置了一个全新的Aurelia CLI项目：

app.js

import {inject} from 'aurelia-framework';
import {Router, Redirect} from 'aurelia-router';

export class App {
    configureRouter (config, router) {
        config.title = 'Test';
        config.options.pushState = true;
        config.options.hashChange = false;
        config.options.root = '/';

        config.map([
            {
                route: [''],
                name: 'home',
                moduleId: 'resources/elements/home',
                title: 'Home'
            },
            {
                route: ['about'],
                name: 'about',
                moduleId: 'resources/elements/about',
                title: 'About',
                settings: {auth: true}
            },
        ]);

        config.addAuthorizeStep(AuthorizeStep);
    }
}

@inject(Router)
class AuthorizeStep {
    constructor (router) {
        this.router = router;
    }

    run (navigationInstruction, next) {
        // Never allow access to auth routes
        if (navigationInstruction.getAllInstructions().some(i => (i.config.settings && i.config.settings.auth))) {
            return next.cancel(new Redirect(this.router.generate('home') + '#foo'));
        }

        return next();
    }
}

app.html

<template>
    <a route-href="route: home">Home</a> | <a route-href="route: about">About</a>
    <router-view></router-view>
</template>

home.js

export class Home {}

home.html的

<template>
    <h1>Home</h1>
</template>

about.js

export class About {
}

about.html

<template>
    <h1>About</h1>
</template>

正如您所看到的，转到/关于应该将您重定向回/＃foo，虽然确实有效（用户最终在/＃foo）但我得到了同样的错误：vendor-bundle.js:14169 ERROR [app-router] Error: Route not found: /#foo

重定向到URL并在末尾附加哈希

0 个答案: