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

问题描述

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

I was working on migration of my Angularjs code from ng-router to UI-Router. In my ng-router I have optional parameters however I realized that same easy way to support optional parameter is not supported in ui-router. Following is my routes from my existing ng-router module.

//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参数在这里非常顺利地实现为可选项。

Note: If you see ":userid" parameter is very smoothly implemented here as optional.

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

I tried following in ui-router however same is not working. I have gone through many post and it was suggested to duplicate the routes. I really don't want to duplicate as it will make code dirty.

//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都不起作用。如何在没有尾随斜线的情况下制作它？

Here /my-app/home/ works however /my-app/home doesn't work. How to make it without trailing slash as well?

同样在关于同一问题的帖子后，我惊讶地发现ui-router不支持这一点。它仍然有效吗？
请帮忙。

Also following post on same issue has surprised to me to know that this is not supported in ui-router. Is it still valid?Please help.

推荐答案

我们可以使用 参数：{} 对象完全按照我们的需要定义 userid （即可以省略）。

在此查看 params 的更多详细信息：

Check more details about params here:

  $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',
      ...
    })

检查

这篇关于如何使用UI-Router定义可选参数而不使用尾部斜杠？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！