UI Router状态可选参数配置：实现首页URL路由至搜索状态的技术问询

我来帮你搞定这个UI Router的状态配置需求！其实不需要太复杂的正则表达式，利用UI Router的参数配置和路由规则就能完美实现你的映射要求。下面是具体的解决方案：

核心思路 #

我们需要让search状态优先匹配两种场景：带有slug路径参数的URL，或者根路径带有search查询参数的URL；只有当根路径既没有slug也没有search参数时，才匹配home状态。

具体配置代码 #

首先，按照先特殊后通用的顺序定义状态（UI Router会按定义顺序匹配状态）：

// 1. 定义search状态，匹配带slug或search参数的URL
angular.module('yourApp').config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('search', {
      // 匹配/:slug 或 /:slug/ （末尾斜杠可选），同时支持search查询参数
      url: '/:slug(/)?',
      params: {
        // 设置slug为可选参数，为空时不在URL中显示
        slug: {
          optional: true,
          squash: 'always'
        },
        // search是可选的查询参数
        search: {
          optional: true
        }
      },
      template: '<h1>Search Results</h1>',
      controller: function($stateParams) {
        // 在这里可以获取slug和search参数做逻辑处理
        console.log('Current slug:', $stateParams.slug);
        console.log('Search query:', $stateParams.search);
      }
    })
    // 2. 定义home状态，仅匹配纯根路径/
    .state('home', {
      url: '/',
      template: '<h1>Home Page</h1>'
    });

  // 3. 处理根路径的分支逻辑：当/带有search参数时跳转到search状态
  $urlRouterProvider.when('/', function($state) {
    const searchQuery = $state.params.search;
    if (searchQuery !== undefined) {
      // 带search参数，跳转至search状态并传递参数
      return $state.go('search', { search: searchQuery });
    }
    // 无search参数，保留home状态
    return false;
  });

  // 默认路由 fallback到home
  $urlRouterProvider.otherwise('/');
});

验证匹配规则 #

配置完成后，各个URL会按预期映射：

• / → 匹配home状态
• /?search= 或 /?search=foo → 自动跳转到search状态，$stateParams.search会获取到对应值
• /your-slug/ 或 /your-slug/?search=foo → 直接匹配search状态，$stateParams.slug和search都能正常获取

补充说明 #

• 末尾斜杠的处理：URL中的/:slug(/)?是用正则实现了末尾斜杠的可选性，不管用户输入带不带斜杠都能匹配。
• 参数squash: 'always'的作用：当slug为空时（比如根路径带search参数的情况），URL不会显示/:slug的空占位，保持URL整洁。

这样配置后就能完全满足你的需求啦！

内容的提问来源于stack exchange，提问作者tekstrand