当“/"用于父状态的 url 时，url 中会出现两个斜杠 [英] When '/' is used for url of a parent state two slashes appear in url

问题描述

更新:
我的假设是错误.我希望 url 以通常生成最终路径的方式表示具有相应组合的路径的组件.但 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.

我有以下状态:

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

转换到banksList.bank后浏览器显示http://bla-bla//bank/1，并且base标签指向http://bla-bla/.

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

看起来 url 只是连接在一起.我需要启用某种模式还是什么?

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

推荐答案

有 一个工作 plunker

为了让您的期望有效，您可以使用魔法符号 ^.这实际上是对 UI-Router 说:重新启动 url 定义，不要使用父部分"

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}',
    ...
})

见:

如果你想要绝对的 url 匹配，那么你需要在你的 url 字符串前加上一个特殊符号^"....

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

因此，正如 plunker 示例所示，这些链接将按预期工作

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'})">

在此处操作

这篇关于当“/"用于父状态的 url 时，url 中会出现两个斜杠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！