如何使用UI-Router定义可选参数而不使用尾部斜杠？

Question

我正在努力将我的Angularjs代码从ng-router迁移到UI-Router.在我的ng-router中我有可选参数但是我意识到在ui-router中不支持同样简单的方法来支持可选参数.以下是我现有的ng-router模块的路由.

//Define routes for view  using ng-router
$routeProvider.
        when('/my-app/home/:userid?', {
            templateUrl: '/templates/partials/home/HomeView.html',
            controller: 'HomeViewController'
        })                   
        .when('/my-app/:productKey/:userid?', {
            templateUrl: '/templates/partials/productpage/ProductPageView.html',
            controller: 'ProductViewController'
        })
        .otherwise({redirectTo: '/my-app/home'});

注意:如果您看到":userid"参数在这里非常顺利地实现为可选.

我尝试在ui-router中跟随但是同样不起作用.我经历了很多帖子,建议复制路线.我真的不想复制,因为它会使代码变脏.

//Set the default route

$urlRouterProvider.otherwise('/my-app/home');
//Define routes for view   (Please make sure the most matched pattern is define at top)
$stateProvider
        .state('viewallcards', {
            url: '/my-app/home/:userid',
            templateUrl: '/templates/partials/home/HomeView.html',
            controller: 'HomeViewController'
        })
        .state('productpage', {
            url: '/my-app/:productKey/:userid',
            templateUrl: '/templates/partials/productpage/ProductPageView.html',
            controller: 'ProductViewController'
        });

这里/ my-app/home /但是/ my-app/home不起作用.怎么做也没有尾随斜线？

在同一个问题上关注帖子也让我感到惊讶,知道ui-router不支持这个.它仍然有效吗？请帮忙.

Answer 1

有一个工作的例子

我们可以使用params : {}object来userid完全按照我们的需要定义(即可以省略).

params在这里查看更多细节:

Angular ui路由器在没有URL的状态之间传递数据

  $stateProvider
    .state('viewallcards', {
      url: '/my-app/home/:userid',
      params: { 
        userid: {squash: true, value: null }, // this will make both links below working:
        //         #/my-app/home
        //         #/my-app/home/
      },
      ...
    })
    .state('productpage', {
      url: '/my-app/:productKey/:userid',
      ...
    })

在这里检查它