Question

Aurelia新手在这里和我碰壁了。

因此，此代码工作正常并且路由更改发生，但只有在点击home.html文件上的“提交”按钮后才会发生。在第一个“提交”按钮上单击，我收到以下错误：ERROR [app-router] Error: Route not found: /anonymous-wow-armory-profile/。

我的问题是为什么它在两个表单提交后才起作用，但不是第一个？我知道我在这个过程中遗漏了一些东西。

home.html的

<template>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12 nav-home text-center">
                <a href="http://www.maskedarmory.com">Create Profile</a>
                <a href="mailto:shane@khaccounts.net?subject=Bug Report">Bug Report</a>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="logo">
                    <img src="dist/assets/images/logo.png" alt="Logo" />
                </div>
            </div>
        </div>

        <div class="row row-bottom-pad">
            <div class="col-md-4"></div>
            <div class="col-md-4">
                <div class="profile-creation-box">
                    <div class="box-padding">
                        <strong>Masked Armory</strong> is the most well known anonymous World of Warcraft (WoW) profile source in the Real Money Trading (RMT) market. We take everything to the next level with offering alternate gear sets, sorted reputation display, Feat of Strength / Legacy achievement display, and much more!<br /><br />
                        Come make a profile at Masked Armory today and see that we are the best solution for all of your anonymous WoW Armory profile needs!
                    </div>
                </div>
            </div>
            <div class="col-md-4"></div>
        </div>

        <div class="row">
            <div class="col-md-4"></div>
            <div class="col-md-4 container-bottom-pad">
                <div class="profile-creation-box">
                    <div class="box-padding">
                        <form class="form-horizontal" role="form" submit.delegate="submit()">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">Region</label>
                                <div class="col-sm-9">
                                    <label class="radio-inline">
                                        <input type="radio" name="region_name" value="us" checked.bind="postData.region"> United States
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="region_name" value="eu" checked.bind="postData.region"> Europe
                                    </label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="server_name" class="col-sm-3 control-label">Server</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="server_name" placeholder="Server Name" value.bind="postData.serverName">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="character_name" class="col-sm-3 control-label">Character</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="character_name" name="character_name" placeholder="Character Name" value.bind="postData.characterName">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-3 col-sm-9">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" id="altgear" name="altgear"> Add Alternate Gearset
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-3 col-sm-9">
                                    <button type="submit" class="btn btn-danger">Create Armory Profile</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-md-4"></div>
        </div>
    </div>
</template>

home.js

import {inject} from 'aurelia-framework';
import {HttpClient} from 'aurelia-http-client';
import {Router} from 'aurelia-router';

@inject(Router)
export class Home {

    postData: Object = {};
    data: string = '';
    code: string = '';
    loading: boolean = false;
    http: HttpClient = null;
    apiUrl: string = 'http://localhost:8000/api/v1';

    constructor(router) {
        this.http = new HttpClient().configure(x => {
            x.withBaseUrl(this.apiUrl);
            x.withHeader('Content-Type', 'application/json');
        });

        this.maRouter = router;
    }

    submit() {

        console.log(this.postData);

        this.http.post('/armory', JSON.stringify(this.postData)).then(response => {
            this.data = response.content;
            this.code = response.statusCode.toString();
            this.loading = false;
        });

        this.maRouter.navigateToRoute('armory', {id: this.data});
    }
}

armory.js

import {inject} from 'aurelia-framework';
import {HttpClient} from 'aurelia-http-client';

export class Armory {

    postData: Object = {};
    data: string = '';
    code: string = '';
    loading: boolean = false;
    http: HttpClient = null;
    apiUrl: string = 'http://localhost:8000/api/v1';
    profileId: number = 0;

    constructor() {
        this.loading = true;

        this.http = new HttpClient().configure(x => {
            x.withBaseUrl(this.apiUrl);
            x.withHeader('Content-Type', 'application/json');
        });
    }

    activate(params, routeConfig) {
        this.profileId = params.id;
        this.getArmoryData();
    }

    getArmoryData() {
        return this.http.get("/armory/" + this.profileId).then(response => {
            this.data = response.content;

            console.log(this.data);

            this.code = response.statusCode.toString();
            this.loading = false;
        });
    }
}

我在这里缺少什么？

感谢您的帮助！

Answer 1

请提供您的路由器配置

无论如何，我已经看到了一些问题。当没有设置this.data时，您尝试导航，只需等待响应：

this.http.post('/armory', JSON.stringify(this.postData)).then(response => {
        this.data = response.content;
        this.code = response.statusCode.toString();
        this.loading = false;
        this.maRouter.navigateToRoute('armory', {id: this.data});
    });

我们只有this.getArmoryData()在此处成功（如果需要）才会激活页面，也可以使用canActivate()

activate(params, routeConfig) {
    this.profileId = params.id;
    return this.getArmoryData();
}

最好在发送数据之前在this.loading = true;内和armory .activate()中的home.js中设置submit()

Aurelia - 表格提交问题的路线变更

1 个答案: