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

有a working example

我们可以使用 params : {} 对象来完全按照我们的需要定义userid （即准备省略）。

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

Angular ui router passing data between states without 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',
      ...
    })

检查in action here

Answer 2

默认情况下，UI路由器处于＆＃34;严格模式＆＃34; - 区分带斜杠和不带斜线的路线。您可以通过禁用此模式关闭此功能：

当网址包含尾部斜杠时，如何激活我的路由？

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

$urlMatcherFactoryProvider.strictMode(false)

对于旧版本的ui-router，请将此代码段添加到模块的配置功能中。它在$ urlRouterProvider上创建一个规则，该规则将所有缺少尾部斜杠的URL映射到同一个URL，但附加了尾部斜杠。

使用此功能，最好将您的可选参数定义为home?userid=foo样式的网址参数，并设置您希望在网址中看到的内容。

来自UI-Router＆＃39; Wiki。

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

2 个答案:

Angular ui router passing data between states without URL