When '/' is used for url of a parent state two slashes appear in url

问题

Update:
My assumption was wrong. I expected that urls represent components of the path with corresponding combination in a way how final path is usually produced. But urls are just concatenated, nothing more.

I have the following states:

.state('banksList',
{
    url: '/',
    ...
})
.state('banksList.bank',
{
    url: '/bank/{bankId}',
    ...             
})
.state('banksList.bank.branch',
{
    url: '/branch/{branchId}',
    ...
})

After transition to banksList.bank browser shows http://bla-bla//bank/1, and base tag points to http://bla-bla/.

It looks like urls are just concatenated. Do I need to enable some mode or what?

回答1:

There is a working plunker

To keep your expectations working, you can just use magical sign ^. That is effectively saying to UI-Router: "restart url definition, do not use parent part"

.state('banksList',
{
    url: '/',
    ...
})
.state('banksList.bank',
{
    url: '^/bank/{bankId}',
    ...             
})
.state('banksList.bank.branch',
{
    url: '/branch/{branchId}',
    ...
})

See:

Absolute Routes (^)

If you want to have absolute url matching, then you need to prefix your url string with a special symbol '^'. ...

So, as the example plunker shows, these links will work as expected

<a href="#/">
<a href="#/bank/B1">
<a href="#/bank/B2">
<a href="#/bank/B1/branch/A1">
<a href="#/bank/B2/branch/A22">

<a ui-sref="banksList">
<a ui-sref="banksList.bank({bankId: 'X1'})">
<a ui-sref="banksList.bank({bankId: 'X2'})">
<a ui-sref="banksList.bank.branch({bankId: 'X1', branchId: 'Y1'})">
<a ui-sref="banksList.bank.branch({bankId: 'X2', branchId: 'Y22'})">

Check it in action here

回答2:

An empty string url in your banksList state works:

.state('banksList', {
  url: '',
  ...
})
.state('banksList.bank', {
  url: '/bank/{bankId}',
  ...
})
.state('banksList.bank.branch', {
  url: '/branch/{branchId}',
  ...
})

来源：https://stackoverflow.com/questions/37123800/when-is-used-for-url-of-a-parent-state-two-slashes-appear-in-url

标签

angularjs

angular-ui-router

angular-ui