javascript - 如何强制 URL 参数出现在 ui-router 的 URL 中？

Question

我有一个简单的 users.list 状态，配置如下:

$stateProvider.state('users.list', {
  url: '/users/list?type',
  reloadOnSearch: false,
  templateUrl: 'templates/users/list.html',
  params: {
    type: { value: 'all' },
  },
});

我试图强制类型参数始终出现在 URL 中。当我单击由 ui-sref 指令生成的链接时，效果很好。当我直接在浏览器中访问 /users/list 时，就会出现问题。尽管该参数已正确配置到 $state.params 中，但它并未出现在 URL 中。

通常这不是一个大问题，但是当您需要使用季节性参数时，它就变成了一个大问题。例如，假设默认情况下，我只想列出从上周到现在注册的新用户。我可以将参数 from 设置为默认值 today - 7 days，每天都会不同。

因此，当用户与某人共享不带参数的 url 时，可能会造成很多麻烦，例如:“嘿，帮我删除顶部的第三个，这是作弊。”。如果收到消息的人决定改天打开该网址，列表将会有所不同，您可以看到我担心的是什么。

我找不到任何可以帮助我的东西，所以我在这里提问。有人这样做过吗？可行吗？

Answer 1

有a working plunker

我们只需使用设置南瓜:

.state('users.list', {
  url: '/users/list?type',
  reloadOnSearch: false,
  templateUrl: 'templates/users/list.html',
  params: {
    type: {
      value: 'all',
      squash: false,
    },
  },
});

检查一下here

有关更多详细信息，请参阅以下内容:

• Angular ui router passing data between states without URL
• How to pass parameters using ui-sref in ui-router to controller
• With defaulted parameters how do I rewrite the url?

扩展(updated working plunker)

如果我们希望初始页面也使用默认值，我们可以使用此 .otherwise() 设置:

//$urlRouterProvider.otherwise('/users/list');
$urlRouterProvider.otherwise(function($injector, $location) {
    var state = $injector.get('$state');
    state.go('users.list');
    return $location.path();
});

检查that in action here并在此处阅读更多详细信息:

• How not to change url when show 404 error page with ui-router