Angular UI 路由器 ui-sref 嵌套

Question

目前正在 angular 开网店。结构如下

商店页面 - 类别 - 产品

.state('shop', {
        url: '/shop'

.state('shop.category', {
        url: '/:slug'

.state('shop.category.product', {
        url: '/:slug'

然后我使用<a ui-sref=".category({slug: cat.slug})">{{ foo }}</a>到link从商店页面到分类页面。这很好用。但是我如何 link 从类别页面到产品？

如你所想，我想让 URL 看起来像这样

www.site.c@m/shop/dynamic-category/dynamic-product

Answer 1

你应该使用，比如 .product 会告诉路由器我想进入子状态并传递 slug 值。

ui-sref=".product({slug: 'some-product'})"

但从技术上讲，您不应在子状态和父状态中都具有参数 slug。因为当你想直接导航到子状态时，整个事情都会变得一团糟。

就像你当时做 shop.category.product({slug: 'some-cat', slug: 'some-product'}) 一样，你可以在相同的 json 中有 slug 属性，javascript 将无法正确编译。

所以我建议您在每个 state 上为 slug 参数使用不同的名称，如下所示

.state('shop', {
        url: '/shop'

.state('shop.category', {
        url: '/:catslug'

.state('shop.category.product', {
        url: '/:productslug'

Angular UI 路由器 ui-sref 嵌套

Angular UI Router ui-sref nesting

routing

angularjs

angularjs-routing

angular-ui-router