如何强制URL params出现在ui-router的URL中？

I have a simple users.list state, configured like this:

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

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

I'm trying to force the type param to always appear in the URL. When I click on a link generated by the ui-sref directive, it works great. The problem happens when I access /users/list directly in the browser. Although the param is correctly configured into $state.params, it does not appear in the URL.

我试图强制类型参数始终出现在URL中。当我点击ui-sref指令生成的链接时,效果很好。当我直接在浏览器中访问/ users / list时会出现问题。虽然param已正确配置到$ state.params中,但它不会出现在URL中。

Usually that's not a big problem, but it becomes one when you need to use seasonal params. For instance, imagine that, by default, I want to only list new users, registered from the past week until now. I could do that setting a param from with the default value of today - 7 days, which would be different every day.

通常这不是一个大问题,但当你需要使用季节性参数时,它就变成了一个问题。例如,想象一下,默认情况下,我只想列出从过去一周到现在注册的新用户。我可以用今天的默认值设置一个参数 - 7天,每天都会有所不同。

So, when the user shares the url without the param with someone, it can cause a lot of trouble, like: "Hey, delete the third one from the top for me, it's cheating.". If the person who receives the message decides to open the url in another day, the list will be different, and you can see what I'm worried about.

因此,当用户在没有人的情况下共享网址时,可能会造成很多麻烦,例如:“嘿,从我的顶部删除第三个,这是作弊。”如果收到邮件的人决定在另一天打开网址,则列表会有所不同,您可以看到我担心的内容。

I couldn't find anything that could help me, so I'm asking here. Have anyone done that? Is it feasible?

我找不到任何可以帮助我的东西,所以我在这里问。有谁做过吗?这可行吗?

2 个解决方案

#1

There is a working plunker

有一个工作的plunker

We just have to use setting squash:

我们只需要使用设置壁球:

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

Check it here

在这里查看

For more details observe these:

有关详细信息,请观察以下

Angular ui router passing data between states without URL

Angular ui路由器在没有URL的状态之间传递数据

How to pass parameters using ui-sref in ui-router to controller

如何使用ui-router中的ui-sref将参数传递给控制器

With defaulted parameters how do I rewrite the url?

使用默认参数我如何重写网址?

EXTEND (updated working plunker)

EXTEND(更新工作的plunker)

In case, that we want the initial page to be also using the defaults, we can use this .otherwise() setting:

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

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

Check that in action here and read more details here:

检查这里的实际操作并在此处阅读更多详细信息:

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

如何在使用ui-router显示404错误页面时不更改URL

#2

I would suggest simply making another state without state parameter in URL, with onEnter function redirecting to state with required parameter filled.

我建议只在URL中创建一个没有state参数的状态,onEnter函数重定向到填充了所需参数的状态。

#1