Aurelia从/提取动态加载路由 [英] 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;
}
}
Though not all cases will be authorization related, you can always register your own pipeline step using the addPipelineStep API
这篇关于Aurelia从/提取动态加载路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
