angularjs - Angular UI-Router 不显示模板

Question

我遇到了一个非常奇怪的错误。我的 UI-Router 使用 ui-view 设置如下主页模板中的元素。

.state('main.home.one', {
    url: '/',
    templateUrl: 'partials/home/one',
    controller: "OneCtrl"
})
.state('main.home.two', {
    url: '/two/',
    templateUrl: 'partials/home/two',
    controller: "TwoCtrl",
})

• 当我从 main.home.one 导航时至 main.home.two使用 $state.go()它工作正常

• 当我从 main.home.one 导航时至 main.home.two使用 url/two/它不起作用，虽然它成功地从服务器调用了模板，但它加载了 !-- uiView: undefined --

• 如果我将 url 更改为 '/two'来自 '/two/'然后它在通过 url 导航时工作正常

• 仅ui-view元素工作，属性在 <div ui-view>不工作

我的目标是这样加载状态参数:"/two/:id"这当然会破坏事物。如果有人能对这个问题有所了解，我将不胜感激。

Answer 1

尾部斜杠是 UI 路由器路由的重要组成部分。查看this section of the FAQ on making trailing slashes optional ，希望这会有所帮助!

编辑:链接中的相关代码

如何:为所有路由设置尾部斜线

当 url 包含或不包含尾部斜杠时，如何激活我的路由？

在您的配置 block 中将 strictMode 设置为 false:

$urlMatcherFactoryProvider.strictMode(false)

对于旧版本的 ui-router，请将此代码段添加到模块的配置函数中。它在 $urlRouterProvider 上创建一个规则，将所有缺少尾部斜杠的 url 映射到相同的 url，但附加了尾部斜杠。

如果您使用此方法，您需要指定所有带有尾部斜杠的 url。

$urlRouterProvider.rule(function ($injector, $location) {
    var path = $location.url();

    // check to see if the path already has a slash where it should be
    if (path[path.length - 1] === '/' || path.indexOf('/?') > -1) {
        return;
    }

    if (path.indexOf('?') > -1) {
        return path.replace('?', '/?');
    }

    return path + '/';
});

注意:app/scripts/app.js 中的所有路由都必须使用尾随/重新定义。这意味着/things/:id 等路由也会变成/things/:id/。