角UI路由器的嵌套路由在带有圣经的ES6中不起作用? [英] Angular ui-router's nested routes not working in ES6 with bable?
问题描述
我在Angular中有多个模块,我也使用嵌套路由.有一个auth
模块,它也有一个子路由auth.login
,代码如下:-
I have multiple modules in Angular and I also use nested routes. There is an auth
module which also has a sub route auth.login
the code goes as follows:-
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')
})
}
然后根据文件夹结构将它们注入到主模块中.
Then inject these into the main module like this according to the folder structure.
import auth from './features/auth';
import auth from './features/auth/login';
我没有收到任何错误,但除了/
& /auth
路径没有任何反映.如果我使用/login
,它会将我重定向到/
路径.
I am not getting any error but apart from the /
& /auth
path nothing reflects. If I use /login
it redirects me to the /
path.
Kinda很奇怪,但是UI-Router无法正常工作.请提出建议.
Kinda weird but UI-Router is not working. Please suggest.
注意:我使用BableJS和Webpack进行开发
推荐答案
我注意到,您显示的代码从未真正调用导出的函数.那可能是您问题的根源.
I noticed that the code you've shown never actually invokes the exported functions. That might be the root of your problem.
解决此问题的更好方法可能是导出状态对象本身.然后,在最外面的文件中,可以导入这些状态对象,并在$stateProvider
中注册它们.这是一个示例:
A better way to approach this might be to export the state objects themselves. In the outermost file, you can then import those state objects, and register them with the $stateProvider
. Here's an example:
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));
}
这篇关于角UI路由器的嵌套路由在带有圣经的ES6中不起作用?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!