Question

我有一个使用服务器端路由和MVC的Aurelia项目。我正在使用一个布局文件，指向一个主应用程序＆＃34;组件，像这样：

<div aurelia-app="main" start="app" data-model='@Json.Encode( Model )'></div>

我的每个视图都包含对布局文件的引用，如下所示：

<div aurelia-app="main" start="sample-module" data-model='@Json.Encode( Model )'></div>

我的main.js配置如下：

export function configure(aurelia) {
    aurelia.use.standardConfiguration()

    aurelia.container.registerInstance('viewModel', 
        Object.assign({}, JSON.parse(aurelia.host.dataset.model)));

    aurelia.start().then(a => {
        let start = a.host.attributes.start.value;
        a.setRoot(start);
    });
}

我正在利用Aurelia的路由器（在app.js中）：

export class App {
    constructor() {
    }
    configureRouter(config, router) {

        config.title = 'Aurelia';

        config.options.pushState = true;
        config.options.root = '/';

        config.map([
            { route: ['', 'Aurelia/Home'],      name: 'home',          moduleId: 'home',              title: 'home',            nav: false },
            { route: 'Aurelia/SampleModule',    name: 'sample module', moduleId: 'sample-module',     title: 'sample module',   nav: true },
        ]);
        this.router = router;
    }
}

这几乎有效。如果我使用Aurelia导航链接导航到SampleModule，它会加载模块但不会点击服务器 - 甚至无法点击视图。如果我手动导航到Aurelia/SampleModule，则会加载sample-module两次，包括来自服务器的数据。 Aurelia路由器完全按照我的预期更新网址，因此如果我导航然后点击刷新，它将从服务器正确加载。

我希望能够使用导航更改视图而不刷新整个页面，但仍然利用我的服务器端路由并点击视图和控制器。

Answer 1

我能够通过从每个视图中删除对应用程序的引用来解决我的问题：

<div aurelia-app="main" start="sample-module" data-model='@Json.Encode( Model )'></div>

以及从布局文件和start中移除main.js逻辑，所以现在我的main.js看起来像这样：

export function configure(aurelia) {
    aurelia.use.standardConfiguration()

    aurelia.container.registerInstance('viewModel', 
        Object.assign({}, JSON.parse(aurelia.host.dataset.model)));

    aurelia.start().then(() => aurelia.setRoot());
}

在后端，模型对每个页面都有一个唯一的属性：

public class AppViewModel
{
    public HomeViewModel Home { get; set; }
    public SampleModuleViewModel SampleModule { get; set; }
}

从视图模型（即sample-module.js），它检查是否填充了关联的属性（AppViewModel.SampleModule），如果没有，则进行ajax调用。

如何使用Aurelia的路由器进行服务器端路由

1 个答案: