Url 使用 stateProvider 的多个可选参数 angularjs

Question

如Can angularjs routes have optional parameter values?所述和 AngularJS: Routing with URL having optional parameters 带有参数名称的问号 ? 应使其成为可选的。它对我没有帮助。

var app = angular.module('app', ['ui.router','ngRoute']);

app.config(function ($urlRouterProvider, $stateProvider) {
    $urlRouterProvider.otherwise('/a');
    $stateProvider.state('a', {
        url: '/a',
        templateUrl: 'views/a.html'
    }).state('b', {
        url: '/b/:code?/:d?',
        templateUrl : 'views/b.html'
    })
});

这个 url http://localhost:xx/kk/#/b/1/2 对我来说很好用。但是 http://localhost:xx/kk/#/b (without any parameter) and http://localhost:xx/kk/#/b/1 对我不起作用...

你可以看到我正在使用 $stateProvider 和 ui-router。我不想切换到 $urlRouteProvider

Answer 1

有a working plunker

我们需要的是一个名为 params : {} 的设置，它可以处理可选参数：

 params: {
    code: {squash: true, value: null},
 }

所以状态定义将是

.state('b', {
    url: '/b/:code/:d',
    templateUrl : 'views/b.html',
    params: {
      code: {squash: true, value: null},
      d   : {squash: true, value: null},
    }
})

这些都行得通：

<a href="#/b">
<a href="#/b/code1">
<a href="#/b/code22">
<a href="#/b/code333/d4">

查看这些以获取更多详细信息和示例：

这里还有更多魔法：

Prepend optional attribute in angular ui-router URL
Angular js - route-ui add default parmeter

Url 使用 stateProvider 的多个可选参数 angularjs

Url with multiple optional parameters using stateProvider angularjs

state

angularjs

angular-ui

angular-ui-router