Question

我试图在我的应用程序中设置多个嵌套状态。这是相关的代码。

function configFn($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise("/cart");
        $stateProvider
            .state('checkout', {
                url: '/',
                templateUrl: 'app/checkout/views/checkout.container.html',
                controller: 'checkoutCntrl',
                abstract: true
            })
                .state('checkout.cart', {
                    data: { step: 1 },
                    url: '/cart',
                    views: {
                        "styles": {
                            templateUrl: 'app/checkout/views/checkout.styles.html',
                            controller: 'checkoutStylesCntrl'
                        },
                        "cart": {
                            templateUrl: 'app/checkout/views/checkout.cart.html',
                            controller: 'cartCntrl'
                        }
                    }
                })
                //.other states

    }

我面临的问题是国家和国家的过渡没有发生。
所以如果我在＃/之后没有任何东西打开我的页面，那么我什么也看不到。

如果我在网址中添加了//cart，该应用就可以正常工作，这似乎是合乎逻辑的//cart可能意味着第一个/适用于状态checkout和/cart之后第一个/适用于州checkout.cart。

但问题是我希望状态checkout.cart加载到网址/cart而不是//cart

Answer 1

解决方案非常简单。

当你使用抽象状态时。不要给它一个URL。

        .state('checkout', {
            templateUrl: 'app/checkout/views/checkout.container.html',
            controller: 'checkoutCntrl',
            abstract: true
        })

这应该可以解决问题。

Answer 2

一种解决方案是在没有父母的情况下开始网址评估。我们可以使用此标志 ^

来实现这一目标

.state('checkout.cart', {
    data: { step: 1 },
    url: '^/cart',
    ...

Absolute Routes (^)

如果您希望获得绝对网址匹配，则需要在网址字符串前加上一个特殊符号“ ^ ”。

Angular UI路由器 - 具有空URL的抽象父状态

2 个答案:

Absolute Routes (^)