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

Question

我正在使用UI-Router路由模块。我有 2 个状态，路由器应根据嵌套路由规则将 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时，它显示index.html来自users状态而不是 show.html来自users.id状态。有什么问题吗？

Answer 1

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

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