标签: aurelia-router

我正试图从一条儿童路线导航到另一条儿童路线,但我不断得到Route not found.我的主要问题是:如何在儿童观点之间导航？

以下是代码,我也将在下面提出其他问题.

应用模式 - 查看 应用类:

export class App {
  configureRouter(config, router) {
    config.title = 'My Site';

    config.map([
      { route: ['','job-view'], name: 'jobView', moduleId: './job-view', nav: true, title:'Jobs'},
      { route: ['services'], name: 'services', moduleId: './services', nav: true, title:'Services'}
    ]);

    this.router = router;
    this.router.refreshNavigation();
  }
}

问题2:router如果始终可以访问,为什么我们需要保存在这里aurelia-router？

应用页面:

<template>
  <require from='./nav-bar'></require>
  <nav-bar router.bind="router"></nav-bar>
  <div class="container">
      <router-view></router-view>
  </div>
</template>

好了,现在我们已经定义了根页面视图和导航,让我们定义job-viewMV.

JobView类:

export class JobView {
  configureRouter(config, router) {
    config.map([
      { route: …

我从基于Web表单的遗留应用程序引导Aurelia.我的身份验证相关信息在Custom Base Page类的Web表单应用程序中维护.

如何将此身份验证信息传递和维护到Aurelia的全球范围？这样我可以在使用路径构建菜单时使用它来显示/隐藏基于用户/角色的某些菜单项？

我在页面上进行了长时间的操作.当他进行导航更改时,我怎么能说用户稍等一下？

想法是显示promt对话框.但麻烦阻止了Aurelia路由器的默认行为.

如何让它在Aurelia.js中运作？

我正在使用aurelia-animator-css为路由器视图设置动画.导航到新的路由器视图后,我希望当新视图从右侧滑动到屏幕时,当前视图从屏幕向左滑动.

这是我的router-view元素:

<router-view swap-order="with"></router-view>

这是每个视图中的顶部元素:

<div class="pages au-animate">

这是css:

@keyframes slideLeftIn {
  0% {
    transform: translate(100%, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes slideLeftOut {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}
.pages.au-enter {
  transform: translate(100%, 0);
}
.pages.au-enter-active {
  animation: slideLeftIn 0.6s;
}
.pages.au-leave-active {
  animation: slideLeftOut 0.6s;
}

我使用autoprefixer,所以不需要像"webkit-"这样的前缀.

使用时swap-order="with",当前视图从屏幕向左滑动,然后出现新视图而不滑动.

同样的事情发生在swap-order="before".

这里有一个YouTube的视频画面带swap-order="with".

使用时swap-order="after",当前视图从屏幕向左滑动,然后新视图从右侧滑入.

这里有一个YouTube的视频画面带swap-order="after".

我认为这 …

我正在尝试使用aurelia-router在Aurelia中配置路由，但是会引发一个错误，即找不到我的路由的moduleId（路由到文件）。

我在两个文件router.js和app.js中配置路由，路由器文件仅包含一个包含所有路由的数组。应用程序文件是我项目的主文件。

项目结构：

Router.js：

export default [
  { route: ['', '/', 'home'], name: 'home', title: 'Inicio', layoutView: 'components/common/layout/layout.html', moduleId: 'components/home/home' }
]

App.js

import routes from 'router'
import {RouterConfiguration, Router} from 'aurelia-router';

export class App {

  configureRouter(config, router){
    config.options.root = '/';
    config.title = 'La Tatuadora';
    this.router = router;
    config.map(routes);
  }
}

错误

我的Aurelia应用程序中有两条路线,一个列表(工作)和一个细节(WorkDetail).

在导航中,我只有列表路径:

Home  |  *Work*  |  Contact  |  . . .

当我导航到WorkDetail视图时,我想在导航中将工作路线设置为活动状态.

到目前为止我尝试过的是activate()在WorkDetail视图的回调中激活路由并在deactivate()以下时间处于非活动状态:

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

@inject(Router)
export class WorkDetail {
    constructor(router) {
        this.workRoute = router.routes[2].navModel;
    };

    activate(params, routeConfig, navigationInstruction) {
        this.workRoute.isActive = true;
    };

    deactivate() {
        this.workRoute.isActive = false;
    };
}

我遇到的问题是,在第一次激活时,"工作"导航项不会显示为"活动".如果我导航到另一个WorkItem,它将被设置为"活动".

为什么该导航项仅在后续导航操作中设置为活动状态？或者,有没有更好的方法将父/相关导航项设置为"活动"？

如果你有兴趣,这是我的app.js:https://gist.github.com/alsoicode/37c5699f29c7562d2bf5

Aurelia路由器会记住我最后一个页面,即使在使用setRoot()之后,它也会将我重定向到该页面,即使我想再次登陆主应用程序页面.

我将尝试在用例中解释它.我有两个应用程序:login和app.我在loginapp中登录并被重定向到app.我浏览到/securedPage上app,然后进行注销并重定向到login一次.我与另一个用户登录,login然后我被重定向到app/securedPage. 我想成为并且应该被重定向到app.

使用setRoot()切换应用程序时,如何清除路径历史记录？

我已经在路由器中添加了一个授权管道步骤.一切正常,但是当我使用Redirect该类将用户指向登录页面时,它会将URL作为其参数.如果我使用的话,我更愿意传递路线名称Router.navigateToRoute().这可能吗？

@inject(AuthService)
class AuthorizeStep {
    constructor (authService) {
        this.authService = authService;
    }

    run (navigationInstruction, next) {
        if (navigationInstruction.getAllInstructions().some(i => i.config.auth)) {
            if (!this.authService.isLoggedIn) {
                return next.cancel(new Redirect('url-to-login-page')); // Would prefer to use the name of route; 'login', instead.
            }
        }

        return next();
    }
}

我试着按照这个关于aurelia.io路由的一些教程,如http://www.tutorialspoint.com/aurelia/index.htm

我在我的App类中实现了一个configureRouter方法,但它从未调用过

app.js

export class App {


        constructor()
        {
          console.log("app");
        }

        configureRouter(config, router){


          console.log("configureRouter");

          config.title = 'Aurelia';

          config.map([
              { route: ['','home'],  name: 'home',  
                moduleId: './components/home/home',  nav: true, title:'Home' },
              { route: 'about',  name: 'about',
                moduleId: './components/about/about',    nav: true, title:'About' }
          ]);

          this.router = router;
        }
    }

app.html

    <template>

      <nav>
          <ul>
            <li repeat.for = "row of router.navigation">
                <a href.bind = "row.href">${row.title}</a>
            </li>
          </ul>
      </nav>

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

据我所知,app.js中的configureRouter方法应该在模板中检测到路由器视图时自动调用,但事实并非如此(我在chrome控制台中没有出现任何错误)

有任何想法吗？

如何在Aurelia中定义一个回退路由,当当前URL与配置中的任何路由都不匹配时,该路由将导航到该路由？