我在 Angular 中有多个模块,并且还使用嵌套路由。有一个 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')
});
}
auth.route.js
routes.$inject = ['$stateProvider'];
export default function routes($stateProvider) {
$stateProvider
.state('auth', {
url: '/auth',
template: require('./auth.tpl.html')
})
}
然后根据文件夹结构将它们注入(inject)到主模块中。
import auth from './features/auth';
import auth from './features/auth/login';
我没有收到任何错误,但除了 /
和 /auth
路径之外,没有任何反射(reflect)。如果我使用 /login
,它会将我重定向到 /
路径。
有点奇怪,但 UI-Router 不工作。请提出建议。
注意:我使用 BableJS 和 Webpack 进行开发
最佳答案
我注意到您显示的代码实际上从未调用导出的函数。这可能是您问题的根源。
解决此问题的更好方法可能是导出状态对象本身。然后,您可以在最外层的文件中导入这些状态对象,并将它们注册到 $stateProvider
。这是一个例子:
登录.route.js
let loginState = {
// UI-Router allows state definitions to contain the name
name: 'auth.login',
url: '/login',
template: require('./login.tpl.html')
}
// Just export the state definition; you don't have to register it yet
export default loginState;
auth.route.js
let authState = {
name: 'auth',
url: '/auth',
template: require('./auth.tpl.html')
}
export default authState;
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));
}
关于javascript - Angular ui-router 嵌套路由在带有 babel 的 ES6 中不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34932972/