Javascript 如何使用UI路由器定义可选参数而不使用尾随斜杠？

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

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

我试着在用户界面路由器以下，但同样是不工作。我看过很多帖子，有人建议我复制这些路线。我真的不想重复，因为它会使代码变脏

//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/works但是/my app/home不工作。如何使它没有尾部斜杠以及

同样，在同一问题上的后续文章中，我惊讶地发现ui路由器中不支持这一点。它仍然有效吗？ 请帮忙。

有

我们可以使用

参数：{}

对象精确地定义

用户ID

（即，可以省略）

请在此处查看有关

params

的更多详细信息：

---

选中它

默认情况下，UI路由器处于“严格模式”——在该模式下，它区分带尾随斜杠和不带尾随斜杠的路由。您可以通过禁用此模式来关闭此功能：

当url包含或不包含尾随斜杠时，如何激活我的路由

在配置块中将strictMode设置为false：

$URLMacherFactoryProvider.strictMode（false）

对于旧版本的ui路由器，请将此代码段添加到模块的配置函数中。它在$urlRouterProvider上创建一条规则，将缺少尾随斜杠的所有url映射到同一url，但附加了尾随斜杠

使用此选项，最好以

home？userid=foo

的样式将可选参数定义为URL参数，并设置您总是希望在URL中看到的内容

---

从UI路由器的。

我认为UI路由器的参数化URL在可选参数的情况下不需要问号。无论是否使用？。如果我删除？当我使用ui路由器时，我对变量使用了大括号形式。我无法让冒号表单工作。也许试试{userid}？取而代之的是：userid？，FWIW。对我不起作用：-（您是否收到错误？是否加载页面而不传递参数？谢谢。我将尝试此方法，我确信此方法会起作用。文档建议设置$URLMacherFactoryProvider.strictMode（false）不起作用，而此方法起作用。谢谢。哪个选项更好？使用{squash:true，value:null}或$urlMatcherFactoryProvider.strictMode（false）？我认为对于您的情况，squash:true更好，因为它更好地允许您定义作为URL一部分的可选参数。我使用了strictMode（false）为了定义我希望路由是否包含尾部斜杠，我使用了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',
      ...
    })