angularjs - 我想动态应用 ui 路由器中的参数

Question

我有一些类别 URL 的参数，例如/:rootcategory/:sub/:sub ，它是动态的，对于产品，我必须像/product/:productname/:producturl 这样路由......它使用 ui 运行良好-sref 但是当我进入 URL 并刷新它时，配置变得困惑，并且在这两种 URL 情况下，它都会将我发送到类别页面。

.state('category3',{
        url: '/:name1/:name2/:name3',
        templateUrl: 'template/product/productsgridpage.html',
        controller: 'categoryCtrl',
        parent: 'productpagelayout'
    })
.state('product', {
            url: '/product/:name1/:name2',
            templateUrl: 'template/product/detailpage.html',
            controller: 'productCtrl',
            parent: 'productpagelayout',
        })

Answer 1

更新答案:

问题是类别还验证产品页面，类别状态的 url 参数 (/:name1/:name2/:name3) 将接受 (/product/disc/test >) 因为 name1 没有任何特殊的检查来限制关键字 products 不通过。所以我建议进行正则表达式检查，以限制关键字产品，这样就不会出现此问题。

类别的正则表达式如下

url: '/{name1:\b(?!\bproduct\b)\w+\b}/:name2/:name3',

如果name1参数以product开头，则正则表达式检查将失败，并且不会进入类别状态，因此它将进入产品状态，这就是我们所需要的。

.state('category3',{
    url: '/{name1:\b(?!\bproduct\b)\w+\b}/:name2/:name3',
    templateUrl: 'template/product/productsgridpage.html',
    controller: 'categoryCtrl',
    parent: 'productpagelayout'
})
.state('product', {
        url: '/product/:name1/:name2',
        templateUrl: 'template/product/detailpage.html',
        controller: 'productCtrl',
        parent: 'productpagelayout',
})

上一个答案:

由于您传递了“products/hplaptop5050/hp-laptop”，它会将产品参数作为类别本身，因此会转到类别，您需要一个静态变量甚至一个唯一的输入变量，以便它不会混淆，我可以建议类似 "/{categoryid:int}/:name1/:name2/:name3" 或 "/0/:name1/:name2/:name3"，这样我们就可以与产品和类别页面有明显的区别。

.state('category3',{
        url: '/{categoryid:int}/:name1/:name2/:name3',
        templateUrl: 'template/product/productsgridpage.html',
        controller: 'categoryCtrl',
        parent: 'productpagelayout'
    })
.state('product', {
            url: '/product/:name1/:name2',
            templateUrl: 'template/product/detailpage.html',
            controller: 'productCtrl',
            parent: 'productpagelayout',
        })

请阅读 UI 路由器文档中的状态声明页面部分，如果需要，您可以提出不同的方法。

引用:ui router state docs