Javascript 角度用户界面路由器';s嵌套路由在使用bable的ES6中不起作用?
我在Angular中有多个模块,并且我还使用嵌套路由。有一个Javascript 角度用户界面路由器';s嵌套路由在使用bable的ES6中不起作用?,javascript,jquery,angularjs,angular-ui-router,ecmascript-6,Javascript,Jquery,Angularjs,Angular Ui Router,Ecmascript 6,我在Angular中有多个模块,并且我还使用嵌套路由。有一个auth模块,它还有一个子路由auth.login代码如下:- Login.route.js routes.$inject = ['$stateProvider']; export default function routes($stateProvider) { $stateProvider .state('auth.login', { url: '/login',
auth
模块,它还有一个子路由auth.login
代码如下:-
Login.route.js
routes.$inject = ['$stateProvider'];
export default function routes($stateProvider) {
$stateProvider
.state('auth.login', {
url: '/login',
template: require('./login.tpl.html')
});
}
routes.$inject = ['$stateProvider'];
export default function routes($stateProvider) {
$stateProvider
.state('auth', {
url: '/auth',
template: require('./auth.tpl.html')
})
}
auth.route.js
routes.$inject = ['$stateProvider'];
export default function routes($stateProvider) {
$stateProvider
.state('auth.login', {
url: '/login',
template: require('./login.tpl.html')
});
}
routes.$inject = ['$stateProvider'];
export default function routes($stateProvider) {
$stateProvider
.state('auth', {
url: '/auth',
template: require('./auth.tpl.html')
})
}
然后根据文件夹结构,像这样将它们注入主模块
import auth from './features/auth';
import auth from './features/auth/login';
我没有收到任何错误,但除了/
&/auth
路径之外,没有任何内容反映。如果我使用/login
,它会将我重定向到/
路径
有点奇怪,但UI路由器不工作。请建议
注意:我使用BableJS和Webpack进行开发我注意到您显示的代码实际上从未调用导出的函数。这可能是你问题的根源 更好的方法是导出状态对象本身。在最外层的文件中,您可以导入这些状态对象,并向
$stateProvider
注册它们。下面是一个例子:
Login.route.js
auth.route.js
app.js
此文件显示应用程序的引导。它从子模块导入状态定义,并将它们注册到$stateProvider
// Now import the state definitions from the other modules
import loginState from './Login.route.js';
import authState from './auth.route.js';
let app = angular.module('app', ['ui.router']);
// create a single config block which registers
// all the state definitions that were imported
app.config(registerAllStates);
registerAllStates.$inject = ['$stateProvider'];
function registerAllStates($stateProvider) {
// Loop over them and register them with the $stateProvider.
[loginState, authState].forEach(state => $stateProvider.state(state));
}
模板请求是否在开发工具网络中成功?如果失败,将导致路由拒绝