Angular UI 路由器 - 空的抽象父状态 Url

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 放在 url 中，应用程序可以正常工作，这似乎合乎逻辑，因为 //cart 可能意味着第一个 / 用于状态 checkout 和 /cart 在第一个 / 之后用于状态 checkout.cart.

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

Answer 1

一个解决方案是在没有 parent 的情况下开始 url 评估。我们可以用这个符号 ^

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

Absolute Routes (^)

If you want to have absolute url matching, then you need to prefix your url string with a special symbol '^'.

Answer 2

解决方法很简单。

因为您正在使用抽象状态。不要给它 URL.

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

这应该可以解决问题。

Angular UI 路由器 - 空的抽象父状态 Url

Angular UI Router - Abstract Parent State with empty Url

javascript

angularjs

single-page-application

angular-ui-router

Absolute Routes (^)