For the task I want to implement the URL in this form:

https://site.com/tab?file=12345#type

where tab = tab in which I am, 12345 the file number that is open, #type name of the sub-tab where the file is located. If I use in routing ? accordingly, all subsequent parameters follow ampersands & . There is a URL of this type https://site.com/tab?file=12345&type=type . Which is logical, of course. Unfortunately, nowhere could I find information about the hash in the URL with parameters. Complicated by the fact that the hash here does not play the role of an anchor. Tell me, is such a URL possible using ui-router ?

  • It is possible to slightly alter your URL to https://site.com/tab/12345/type . If this is suitable, write, I will give the answer how to do it. - Stepan Kasyanenko
  • Thanks for your answer, unfortunately I have such a URL now, I just need to switch to this non-standard one .. - YoroDiallo
  • You can always pull the passed parameters through the location . In your case, location.hash//#type and location.search //?file=12345 . Of course, you have to manually parse location.search or use jQuery. - Stepan Kasyanenko
  • By the way, if you are using a ui-route version greater than 1.0.0, then you do not need to parse anything. In $transition$.params() will be {#:"type",file:"12345"} . - Stepan Kasyanenko

1 answer 1

Yes, this option is possible. Judging by the url , ui-router works in the html5mode = true mode.

Nothing special to do. Do you have a routing

  $stateProvider.state({ name: 'test-hash', url: '/tab?file',//задаем параметр views: { 'content@main': { component: 'testComponent' } }, resolve: { pageResolve: ["$transition$", function ($transition$) { console.log$,$transition$.params());// здесь будет объект {#:"type",file:"12345"} }] } });

When you set the url form https://site.com/tab?file=12345#type in the console will be {#:"type",file:"12345"} .

Example on plunker

  • thanks for the answer! I think there should be no problems with parsing, if such a structure is possible. You can also try using $ location.hash () to get the parameter. but a hitch in another. when I do this URL - it changes as I need, but the routing then breaks .. plnkr.co/edit/TjFzkuu1vkptdP9UfqQL?p=preview if you select Hello -> any sub tab - YoroDiallo
  • The snag is that if you make a URL in the last route, it’s not a regular queue, but a normal one, then everything works (but the url structure, of course, without already?) var filmState = { name: 'main.helloMovies.film', url: '^/main/:id' } - YoroDiallo
  • Look, I updated the answer. To be honest, I fell out of the context of the question a bit, and I could not return to it) Look at the planer, is this what you need? - Stepan Kasyanenko