2016-07-27 223 views
0

所以我得到一个Aurelia应用程序的路由未找到错误,我有一个使用子路由器的每个步骤的向导。路由问题在Aurelia儿童路由器的向导

用户可能会在中途停止向导过程,然后需要稍后导航回向导。我希望能够将用户导航回当前的步骤。我坚持当前的步骤在数据库。

我有路由工作,用户在第1步启动,并可以通过每个步骤。这是当我尝试导航到当前步骤,我得到的问题。

作为参考,这是我主要的应用程序的路由器配置

configureRouter(config, router) { 
    config.title = 'CoQC Builder'; 
    config.addAuthorizeStep(AuthorizeStep); 
    config.map([ 
        { route: ['', 'home'], name: 'home', auth:true, moduleId: 'home/home',  nav: true, title: 'Home', settings:{ icon:'fa fa-home',id:0,isHomePage:true, parentId:null,hasChildren:false,isTask:false,isDialogLink:false} }, 
        { route: 'home',   name: 'tasks', auth:true,  moduleId: 'home/home', nav: true, title: 'Tasks', settings:{icon:'fa fa-list',id:1,isHomePage:false, parentId:null,hasChildren:false,isTask:true,isDialogLink:false} }, 
        { route: 'home-fae',   name: 'faehome', auth:true,  moduleId: 'home/home-fae', nav: false, title: 'FAE Home', settings:{icon:'fa fa-list',id:12,isHomePage:true, parentId:null,hasChildren:false,isTask:true,isDialogLink:false} }, 
        { route: 'home-admin',   name: 'adminhome', auth:true,  moduleId: 'home/home-admin', nav: false, title: 'Admin Home', settings:{icon:'fa fa-list',id:13,isHomePage:true, parentId:null,hasChildren:false,isTask:true,isDialogLink:false} }, 
        { route: 'home-coqc',   name: 'coqchome', auth:true,  moduleId: 'home/home-coqc', nav: false, title: 'COQC Home', settings:{icon:'fa fa-list',id:14,isHomePage:true, parentId:null,hasChildren:false,isTask:true,isDialogLink:false} }, 
        { route: 'home-qa',   name: 'qahome', auth:true,  moduleId: 'home/home-qa', nav: false, title: 'QA Home', settings:{icon:'fa fa-list',id:15, parentId:null,isHomePage:true,hasChildren:false,isTask:true,isDialogLink:false} }, 
        { route: 'customer/:id', name: 'customer',auth:true, moduleId: 'customer/customer',href:"customer" ,nav: true, title: 'Customers', settings:{icon:'fa fa-users',id:2,parentId:null,hasChildren:true,isTask:false,isDialogLink:false} }, 
        { route: 'customer/search', name: 'mycustomers',auth:true, moduleId: 'Customer/customer', nav: true, title: 'Search Customers', settings:{icon:'fa fa-search',id:4,parentId:2,hasChildren:false,isTask:false,isDialogLink:false} }, 
        { route: 'customer/my', name: 'customers',auth:true, moduleId: 'customer/customer', nav: true, title: 'My Customers', settings:{icon:'fa fa-th-large',id:5,parentId:2,hasChildren:false,isTask:false,isDialogLink:true} }, 
        { route: 'coqc/search', name: 'coqc-search',auth:true, moduleId: 'search/search', nav: true, title: 'CoQC Search', settings:{icon:'fa fa-search',id:11, parentId:null,hasChildren:false,isTask:false,isDialogLink:false} }, 
        { route: 'gcoqclibrary', name: 'gcoqclibrary',auth:true, moduleId: 'gcoqclibrary', nav: true, title: 'gCoQC Library', settings:{icon:'fa fa-suitcase',id:6, parentId:null,hasChildren:false,isTask:false,isDialogLink:false} }, 
        { route: 'help', name: 'help', moduleId: 'help',auth:true, nav: true, title: 'Help/FAQ ', settings:{icon:'fa fa-question-circle',id:7, parentId:null,hasChildren:false,isTask:false,isDialogLink:false} }, 
        { route: 'feeds', name: 'feeds', moduleId: 'feeds',auth:true, nav: true, title: 'My Feeds', settings:{icon:'fa fa-feed',id:8, parentId:null,hasChildren:false,isTask:false,isDialogLink:false} }, 
        { route: 'user-profile', name: 'user-profile',auth:true, moduleId: 'user-profile', nav: true, title: 'User Profile', settings:{icon:'fa fa-user',id:9, parentId:null,hasChildren:false,isTask:false,isDialogLink:false} }, 
        { route: 'settings', name: 'settings',auth:true, moduleId: 'settings', nav: true, title: 'Settings', settings:{icon:'fa fa-cog',id:10, parentId:null,hasChildren:false,isTask:false,isDialogLink:false}} , 
        { route: 'coqc/wizard',auth:true, name: 'coqc-wizard', moduleId: 'wizard/wizard', nav: true, title: 'CoQC Wizard', settings:{icon:'fa fa-cog',id:10, parentId:null,hasChildren:false,isTask:false,isDialogLink:false} } 


    ]); 
    config.mapUnknownRoutes({ route: "id_token*token", moduleId: "home/home", nav: false, title: "home" }); 
    this.router = router; 
} 

这里是孩子路由器的配置:

configureRouter(config, router) { 
    config.title = 'wiz router'; 
    config.map( 
      { route: ["","/",":id/step1"],name:"wizard-step1",nav: true, moduleId: "./wizard-step1", href:"#/coqc-wizard/wizard-step1/",title: "Step 1: Format & Customer Selection", settings:{index:0, menu:"./wizard-step1-nav", step:1,formats:['PDF','EXCEL','XML','CSV',null], next:[{format:'PDF',index:1},{format:'Excel',index:1} ,{format:'XML',index:2},{format:'CSV',index:2}]}}, 
      { route: [":id/step2"],name:"wizard-step2", moduleId: "./wizard-step2", nav: true,href:"#/coqc-wizard/wizard-step2/", title: "Step 2: Format Setup", settings:{index:1, menu:"./wizard-step2-nav", step:2,formats:['PDF','EXCEL'],next:[{format:'PDF',index:2},{format:'Excel',index:2}],previous:[{format:'PDF',index:0},{format:'EXCEL',index:0}]} }, 
      { route: [":id/step3"],name:"wizard-step3", moduleId: "./wizard-step3", nav: true,href:"#/coqc-wizard/wizard-step3/", title: "Step 3", settings:{index:2, menu:"./wizard-step3-nav", step:3,formats:['PDF','EXCEL','XML','CSV'], next:[{format:'PDF',index:3},{format:'EXCEL',index:3} ,{format:'XML',index:3},{format:'CSV',index:3}],previous:[{format:'PDF',index:1},{format:'EXCEL',index:1} ,{format:'XML',index:0},{format:'CSV',index:0}]} }, 
      { route: [":id/step4"],name:"wizard-step4", moduleId: "./wizard-step4", nav: true,href:"#/coqc-wizard/wizard-step4/", title: "Step 4", settings:{index:3, menu:"./wizard-step4-nav", step:4,formats:['PDF','EXCEL','XML','CSV'], next:[{format:'PDF',index:1},{format:'EXCEL',index:1} ,{format:'XML',index:2},{format:'CSV',index:2}]} }, 
      { route: [":id/currentStep"],name:"wizard-nav", nav: false, moduleId: "./wizard-nav", title: "Wizard Nav"} 
    ); 
    this.router = router; 
} 

我们的计划是让用户浏览到:ID/currentStep路由,当他们有一个进行中的向导。然后,这条线路将查询当前步骤的数据库,然后将用户重定向到用下面的代码的正确步骤:

export class WizardNavigation{ 
constructor(templateService,parent){ 
    this.templateService = templateService; 
    this.parent = parent; 
} 

activate(params){ 
    ///Logic to determine what step user is on 
    let routename = "wizard-step3";//just an example 
    /// 
    this.parent.router.navigateToRoute(routename, {id:params.id}); 
} 

}

当this.parent.router.navigateToRoute方法获取执行,我从aurelia路由器得到一个错误,说它找不到路由。我尝试过使用this.parent.router.navigate方法进行变化。我也试过在整个路径中传递(例如:“#/ coqc/wizard/9/step2”),并且这些都不起作用。

任何关于我可能会做错的帮助/指导以及我需要采取哪些纠正措施将不胜感激。

谢谢!

回答

0

我发现这个问题..在最近的一些变化。我小心删除从孩子路由器配置的开闭括号

正确的代码是这样的:

config.map([ 
     { route: ["","/",":id/step1"],name:"wizard-step1",nav: true, moduleId: "./wizard-step1", href:"#/coqc-wizard/wizard-step1/",title: "Step 1: Format & Customer Selection", settings:{index:0, menu:"./wizard-step1-nav", step:1,formats:['PDF','EXCEL','XML','CSV',null], next:[{format:'PDF',index:1},{format:'Excel',index:1} ,{format:'XML',index:2},{format:'CSV',index:2}]}}, 
     { route: [":id/step2"],name:"wizard-step2", moduleId: "./wizard-step2", nav: true,href:"#/coqc-wizard/wizard-step2/", title: "Step 2: Format Setup", settings:{index:1, menu:"./wizard-step2-nav", step:2,formats:['PDF','EXCEL'],next:[{format:'PDF',index:2},{format:'Excel',index:2}],previous:[{format:'PDF',index:0},{format:'EXCEL',index:0}]} }, 
     { route: [":id/step3"],name:"wizard-step3", moduleId: "./wizard-step3", nav: true,href:"#/coqc-wizard/wizard-step3/", title: "Step 3", settings:{index:2, menu:"./wizard-step3-nav", step:3,formats:['PDF','EXCEL','XML','CSV'], next:[{format:'PDF',index:3},{format:'EXCEL',index:3} ,{format:'XML',index:3},{format:'CSV',index:3}],previous:[{format:'PDF',index:1},{format:'EXCEL',index:1} ,{format:'XML',index:0},{format:'CSV',index:0}]} }, 
     { route: [":id/step4"],name:"wizard-step4", moduleId: "./wizard-step4", nav: true,href:"#/coqc-wizard/wizard-step4/", title: "Step 4", settings:{index:3, menu:"./wizard-step4-nav", step:4,formats:['PDF','EXCEL','XML','CSV'], next:[{format:'PDF',index:1},{format:'EXCEL',index:1} ,{format:'XML',index:2},{format:'CSV',index:2}]} }, 
     { route: [":id/currentStep"],name:"wizard-nav", nav: false, moduleId: "./wizard-nav", title: "Wizard Nav"} 
]);