在UI-Router的嵌套路由中,子状态加载父状态templateUrl

Child state loads parent state templateUrl in nested routes of UI-Router

本文关键字:状态 加载 templateUrl UI-Router 嵌套 路由      更新时间:2023-09-26

我使用UI-Router模块进行路由。我有两个状态,路由器应该根据嵌套路由规则匹配url:

// Dashboard
.state('dashboard', {
    url: "/dashboard",
    templateUrl: "dashboard/views/index.html",
    controller: "DashboardController",
    ...
})
// Users
.state('users', {
    url: "/users",
    templateUrl: "users/views/index.html",
    controller: "UsersController",
    ...
})
// Single User
.state('users.id', {
    url: "/{id:(?:[a-z0-9_-]{3,16})}",
    templateUrl: "users/views/show.html",
    controller: "UserController",
    ...
})

我还设置了一个默认路由:

$urlRouterProvider.otherwise("/dashboard");

问题:

当我转到http://127.0.0.1:8000/app/#/users/testuser123时,它显示的是users状态的index.html而不是users.id状态的show.html

如果调用http://127.0.0.1:8000/app/#/users/testuser123,则应在users.id的url定义中添加users

.state('users.id', {
    url: "/users/{id:(?:[a-z0-9_-]{3,16})}",
    templateUrl: "users/views/show.html",
    controller: "UserController",
    ...
})