Question

使用AngularUI路由器可以让我有一种方式，其中多个状态匹配请求的URL，但满足第一个开始的那个。

我有两个状态catalog.category用于目录页面，catalog.product用于产品页面。

类别状态：

        $stateProvider
            .state('catalog.category', {
                url: '/shop/category/{slug:.*}',
                controller: 'CategoryCtrl'
            });

产品状态：

        $stateProvider
            .state('catalog.product', {
                url: "/shop/category/{categorySlug:.*}/product/{productSlug}",
                controller: 'ProductCtrl',
            });

如何让/shop/category/men/apparel匹配catalog.category州和/shop/category/men/apparel/product/black-tshirt匹配catalog.product州？

Answer 1

有一个有效的plunker。我们要做的是将第一个更精确的（第二个状态）定义为。如果它将根据正则表达式（url）进行评估......首先会找到它：

.state('catalog.product', {
    url: "/shop/category/{categorySlug:.*}/product/{productSlug}",
    controller: 'ProductCtrl',
    ...
  })
.state('catalog.catagory', {
    url: '/shop/category/{slug:.*}',
    controller: 'CategoryCtrl',
    ...
  })

检查here

Answer 2

嵌套状态怎么样？

        $stateProvider
        .state('catalog.category', {
            url: '/shop/category/{slug:.*}',
            controller: 'CategoryCtrl'
        });

        $stateProvider
        .state('catalog.category.product', {
            url: "/product/{productSlug}",
            controller: 'ProductCtrl',
        });

如何在Angular UI路由器中覆盖路由？

2 个答案: