AngularJS進階(二)AngularJS路由問題解決
AngularJS路由問題解決
遇到了一個棘手的問題：點選優惠詳情時總是跳轉到藥店詳情頁面中去。再加一層地址解決了，但是後來發現問題還是來了:
Could not resolve 'yhDtlMaintain/yhdetail' from state 'yhMaintain'
經過url的對比，自己發現了問題。其中藥店詳情和優惠券詳情的url是相同的。而之前自己在優惠活動詳情中改動了一下，結果正常顯示。然後自己接著檢視優惠活動的修改地方，發現:
/*--------------------------優惠活動詳情維護--------------------------*/
.state('yhhdDtlMaintain'
url: '/index/{yhid}',
views: { //注意這裡的寫法，當一個頁面上帶有多個ui-view的時候如何進行命名和檢視模板的載入動作
'': {
templateUrl: 'rightInfoList.html'
},
'[email protected]': {
templateUrl: 'sys_banner.html'
},
'[email protected]
templateUrl: function($stateParams){
console.log("YHID:");
console.log($stateParams);
return 'yh_set_dtl.html';
}
}
}
})
玄機藏在url中，其實這個url是在瀏覽器中訪問的url，基於使用者瀏覽該應用所在的狀態。同理，自己修改了優惠券詳情的路由，如下:
/*-----------------------------優惠券詳情維護-----------------------------*/
.state('yhqDtlMaintain', {
url: '/yhqIndex/{yhid}',
views: { //注意這裡的寫法，當一個頁面上帶有多個ui-view的時候如何進行命名和檢視模板的載入動作
'': {
templateUrl: 'rightInfoList.html'
},
'[email protected]': {
templateUrl: 'sys_banner.html'
},
'[email protected]': {
templateUrl: function($stateParams){
console.log("YHQID:");
console.log($stateParams);
return 'yh_set_dtl.html';
}
}
}
})
這樣所有的問題就迎刃而解了。但自己還是需要深入理解一下相關原理。若之前不做修改的話，優惠券詳情的url就會與藥店詳情相同，藥店詳情頁面覆蓋了優惠券詳情頁面。