Aurelia 动态加载路由/从 fetch [英] Aurelia load routes dynamically / from fetch

问题描述

我想动态加载菜单选项.所以我想知道最好的方法

I want to load menu options dynamically. so I'm wondering the best approach

我可以使用下面的代码在页面加载后添加路由.这适用于正常导航，但在刷新期间不起作用.

I am able to use the code below to add routes after the page is loaded. This works for normal navigation, but does not work during a refresh.

配置路由器是否可以返回承诺/如何将菜单项加载到路由中?

Can configure router return a promise / how do I load menu items into the route?

 @inject(HttpClient)
 export class DocumentMenu {
  router: Router;
  documents : IDocument[];
  heading = 'Document Router';

  constructor(public http: HttpClient) {}

 activate(): void {

    this.http.fetch('http://localhost:17853/Document/GetDocuments?folderID=13244')
      .then<IDocument[]>(response => response.json())
      .then<IDocument[]>(docs => {    
      if ( docs ){
        for( var doc of docs){
          this.router.addRoute( { route : doc.DocumentID.toString(), name : doc.Name, moduleId: './documents/document', nav:true, title: doc.Name });
        }
        this.router.refreshNavigation();
      }
      return docs;
    });

 }

configureRouter(config: RouterConfiguration, router: Router) {

  var routes = new Array();
  routes.push( 
  { route: 'index', name: 'index-name', moduleId: './documents/index', nav: false, title: 'Documents' } );
  routes.push(       { route: '', redirect: 'index' } );

  config.map( routes );
  this.router = router;
}
}

推荐答案

这不能回答您的问题，但我认为它可能对您和其他有类似问题的人有所帮助.

This does not answer your question, but I think it may be helpful to you and others with a similar issue.

动态路由反模式

您的应用程序有许多不同的路由，所有路由都因应用程序的状态而异.因此，必须先获取数据，然后构建路由，然后将其注册到路由器中.

Your application has a number of different routes, all of which vary based on the state of the application. Therefore, you must first fetch the data, and then build the routes, and then register them with the router.

这是一个反模式的原因是因为当 Aurelia 本身是用描述动态内容的静态方式构建时，您将需要根据应用程序的状态不断更新路由器.

The reason this is an anti-pattern is because you will continuously need to update the router based on the state of the application, when Aurelia itself is built with static ways of describing dynamic content.

动态路由同构数据

假设您正在构建 Google 云端硬盘，并且您有许多不同的文件，这些文件可能会随着用户的添加和删除而发生变化.对于这种情况，您有两类路由:文件夹和文档.因此，您为每个人制作一条路线.

Let's say you are building Google Drive, and you have a number of various files that could change as the user adds and removes them. For this case you have two categories of routes: Folders and Documents. Therefore, you make one route for each.

configureRouter(config) {
    config.map([
        { route: 'folder/:id', moduleId: 'folder' }
        { route: 'document/:id', moduleId: 'document' }
    }
}

class FolderViewModel {
    activate({ id }) {

        // get your specific folder data and load it into your folder view model
        this.fetch('getDocuments?folderId=${id}')
    }   
}

class DocumentViewModel {
    activate({ id }) {

        // get your specific document and load it into your document view model
        this.fetch('getDocuments?documentId=${id}')
    }
}

动态路由异构数据

假设您想建立 YouTube.当用户mjd10d登录后，欢迎他尽情观看视频，但他不高级内容创建者，并且无权访问网站的内容创建部分.处理此问题的最佳方法是将所有可能的路由保留在您的应用程序中，并根据 AuthorizeStep 中的用户凭据过滤它们.

Let's say instead you want to build YouTube. When user mjd10d logs in, he is welcome to watch videos to his heart's content, but he is not a premium content creator, and doesn't have access to the content creation portion of the site. The best way to handle this is to leave all possible routes in your application, and filter them based on the user's credentials in an AuthorizeStep.

configureRouter(config, router) {
  config.addPipelineStep('authorize', AuthorizeStep);
}

@inject(UserSession)
class AuthorizeStep {

  constructor(UserSession) {
    this.user = UserSession;
  }

  run(navigationInstruction, next) {
    var instructions = navigationInstruction.getAllInstructions()
    if (!this.authorized(instructions.config)) {
      return Redirect('404');
    }
    return next();
  }

  authorized(routeConfig) {

    // something smart that returns false if unauthorized
    return this.user.permissionLevel > routeConfig.requiredPermission;
  }
}

尽管并非所有案例都与授权相关，但您始终可以使用 addPipelineStep API

Though not all cases will be authorization related, you can always register your own pipeline step using the addPipelineStep API

这篇关于Aurelia 动态加载路由/从 fetch的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！