Question

我想创建一个导航模块，用于在我的单页应用程序的不同部分之间导航，但我找不到任何优雅的解决方案。

我是否需要使用路线组件？

Answer 1

这是关于该主题的教程： https://www.tutorialspoint.com/aurelia/aurelia_routing.htm

但很快，就像这样：

第1步：创建子视图

subview.html

<template>
  <h1>Subview</h1>
</template>

subview.js

export class Subview {}

第2步：配置父视图

将<router-view>添加到父级html文件

app.html

<template>
  <router-view></router-view>
</template>

在父视图模型中配置Router

configureRouter(config, router) {
  config.map([
    { route: ['', 'home'], name: 'subview', moduleId: './subview', nav: false, title: 'Subview' },
  ]);
  this._router = router;
}

现在，当您在路线subview或<router-view>时，您可以看到/#/的内容已放入/#/home。

您可以通过向锚标记添加route-href="route-name"参数来在视图之间导航。或者直接从this._router对象调用函数，例如：this._router.navigateToRoute('route-name');。

在单个页面中创建导航的最佳方式

1 个答案: